Javascript 如何使用jquery检查特定数量的checbox并禁用剩余？

在具有多个复选框（超过12个）的

.vipGuests

的特定DIV中，我希望选择最多12个复选框。 一旦用户选择第12个复选框，剩余复选框将被禁用

$('.vipGuests input[type=checkbox]').on('change', function () {             
    var totalGuest = 0;
    $('.vipGuests input[type=checkbox]:checked').each(function () {
        totalGuest++;
    });
});

我下面提到的代码只是计算被选中的复选框的数量。如何实现该功能，以便用户最多可以选中12个复选框，其余复选框将被禁用

$('.vipGuests input[type=checkbox]').on('change', function () {             
    var totalGuest = 0;
    $('.vipGuests input[type=checkbox]:checked').each(function () {
        totalGuest++;
    });
});

注意：最主要的是，每次选中/取消选中时，如果选中的复选框计数器为11，则所有复选框都将处于活动状态。只有当计数器等于12时，才会禁用唯一未选中的复选框

您可以使用选择器并选中取消选中复选框并禁用它们。此外，您不需要使用

.each（）

来获取复选框的计数。改用

length

属性

$(".vipGuests :checkbox").on("change", function(){
    if ($(".vipGuests :checkbox:checked").length >= 3)
        $(".vipGuests :checkbox:not(:checked)").prop("disabled", true);
    else
        $(".vipGuests :checkbox:not(:checked)").prop("disabled", false);
});

$（.vipGuests:checkbox”）.on（“更改”，函数（）{
$（“.vipGuests:checkbox:not（：checked）”）.prop（“disabled”，$（“.vipGuests:checkbox:checked”）。长度>=3）；
});
您可以简单地依靠jQuery对象的
长度来检查是否选择了12项。

使用
：not（：checked）
选择器禁用未检查的输入


var$checkbox=$（'.vipGuests输入[type=checkbox]'）；
$checkbox.on（'change'，function（）{
如果（$checkbox.filter（“：checked”）。长度>=12）{
$checkbox.filter（“：not（：checked）”）.prop（“disabled”，true）；
}否则{
$checkbox.prop（“禁用”，false）；
}
});

1.
2.
3

4.
5.
6

7.
8.
9

10
11
12

13
14
15
您可以使用全局变量，如下所示：

     var totalGuest = 0; 
     $(".vipGuests :checkbox").on("change", function(){
       this.checked?totalGuest++:totalGuest--;
       $checkboxes.filter(":not(:checked)").prop("disabled", (totalGuest>=12)?true:false);
       });

希望这对你有帮助。

代码：

你能创建一个jsfiddle@user2181397抱歉。目前我无法生成小提琴。您应该使用
.prop（'disabled'，true/false）
而不是
.attr（）
。