如何检查特定数量的复选框并使用jquery禁用剩余？答案

【问题标题】：How to check specific number of checbox and disable remaining using jquery?如何检查特定数量的复选框并使用jquery禁用剩余？
【发布时间】：2016-10-06 08:06:22
【问题描述】：

在具有 .vipGuests 的特定 DIV 中具有多个复选框（超过 12 个），我想选择最多 12 个复选框。一旦用户选择了第 12 个复选框，那么剩余的复选框将被禁用。

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

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

note ：主要是在检查/取消选中期间检查/取消选中时检查的复选框为11，然后所有复选框都将处于活动状态。只有当 counter 等于 12 时，才会禁用唯一未选中的复选框。

【问题讨论】：

你能创建一个 jsfiddle
@user2181397 抱歉。目前我无法生成小提琴。

标签： javascript jquery html checkbox

【解决方案1】：

您可以使用:not() 选择器并选择未选中的复选框并禁用它们。此外，您不需要使用 .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("change", function(){
    $(".vipGuests :checkbox:not(:checked)").prop("disabled", $(".vipGuests :checkbox:checked").length >= 3);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="vipGuests">
  <input type="checkbox" />
  <input type="checkbox" />
  <input type="checkbox" />
  <input type="checkbox" />
  <input type="checkbox" />
  <input type="checkbox" />
</div>

【讨论】：

您应该使用.prop('disabled', true/false) 而不是.attr()。

【解决方案2】：

您可以简单地依靠 jQuery 对象的length 来检查是否选择了 12 个项目。
使用 :not(:checked) 选择器禁用未检查的输入。

var $checkboxes = $('.vipGuests input[type=checkbox]');
$checkboxes.on('change', function() {
  if ($checkboxes.filter(":checked").length >= 12) {
    $checkboxes.filter(":not(:checked)").prop("disabled", true);
  } else {
    $checkboxes.prop("disabled", false);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="vipGuests">
  <input type="checkbox" checked/>1 
  <input type="checkbox" checked/>2 
  <input type="checkbox" checked/>3<br/>
  <input type="checkbox" checked/>4 
  <input type="checkbox" checked/>5 
  <input type="checkbox" checked/>6<br/>
  <input type="checkbox" checked/>7 
  <input type="checkbox" checked/>8 
  <input type="checkbox" checked/>9<br/>
  <input type="checkbox" checked/>10 
  <input type="checkbox" checked/>11 
  <input type="checkbox" />12<br/>
  <input type="checkbox" />13 
  <input type="checkbox" />14 
  <input type="checkbox" />15
</div>

【讨论】：

【解决方案3】：

您可以使用如下全局变量：

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

【讨论】：

【解决方案4】：

希望这会对您有所帮助。 JSFiddle Link

代码：

var totalGuest = 0;
$('div input[type=checkbox]').not(":radio,:submit").on('change', function () {
  $(this).toggleClass("active");

  if($(this).hasClass("active")) {
   totalGuest ++;
 }
 else {
   totalGuest --;
 }

 if(totalGuest >= 12) {
   $('input[type=checkbox]').not(".active").attr("disabled","disabled");
 }
 else {
   $('input[type=checkbox]').not(".active").removeAttr("disabled");
 }
});

【讨论】：