限制可以选择的项目数

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');
  }
});