Ограничить количество элементов, которые можно выбрать

Question

Мне нужно написать код, который позволяет выбрать только 5 значков, пока я смог написать код, который изменяет цвет выбранного значка (изображение: значок 1 и значок 2), другие остаются серыми, пока они не будут выбраны , теперь я хочу ограничить выбор только 5 значками, а затем пользователь не сможет щелкнуть значки.

Код значка

<div class="row">
            <div class="col-4 col-sm-1 icon">
                <a href="javascript:void(0);" class="btn-network btn-facebook" data-status="1"  onclick="" title="FaceBook">
                    <i class="fa fa-facebook"></i>
                </a>
                <p class="pt-1 pb-2 m-0">FaceBook</p>
            </div>
            <div class="col-4 col-sm-1 icon">
                <a href="javascript:void(0);" class="btn-network btn-instagram btn-invalid" data-status="1"  onclick="" title="Instagram">
                    <i class="fa fa-instagram"></i>
                </a>
                <p class="pt-1 pb-2 m-0">Instagram</p>
            </div>
            <div class="col-4 col-sm-1 icon">
                <a href="javascript:void(0);" class="btn-network btn-linkedin btn-invalid" data-status="1"  onclick="" title="LinkedIn">
                    <i class="fa fa-linkedin"></i>
                </a>
                <p class="pt-1 pb-2 m-0">LinkedIn</p>
            </div>
</div>

Код используется для выбора значков

    <script>
        $('.btn-network').click(function() {
        $(this).toggleClass('btn-selected');
            });
    </script>

дизайн [! [Выбранные значки в цвете, невыбранные - в сером] [1]] [1] [1]: https://i.stack.imgur.com/3ysqj.png

это что-то подобное, я хочу , но я хочу сделать это для значков вместо флажков. : http://jsfiddle.net/vVxM2/

Изменить: я также хочу отобразить DIV ниже, в основном то, что мне нужно; Пользователь может выбрать до 5 значков социальных сетей, после чего они увидят поле ниже (активируется / отображается после выбора) для ввода ссылки профиля пользователя в социальных сетях.

НЕ ВАЖНО: желательно добавить новый класс к отключенным значкам (например, отключено ), чтобы я мог изменить цвет значка для инвалидов

не могли бы вы помочь, пожалуйста?

спасибо

Answer 1

проверьте длину выбранных значков перед переключением класса

const limit = 5;
$('.btn-network').click(function() {
  if($(this).parent().siblings().children('.btn-selected').length < limit) {
    $(this).toggleClass('btn-selected');
  }
});