javascript - 如何在达到限制时禁用未选中的复选框

Question

我想知道如何使用 jQuery 禁用未选中的复选框。目标是如果选中的复选框数量大于或等于 3，则禁用未选中的复选框。

 $('.myCheckBox').change(function() {
   var checkBoxLenghtStandard = $('[name="addon-2811-workshop-normal-    1[]"]:checked').filter(':checked').length;

   if (checkBoxLenghtStandard >= 3) {
     //Here I would like to disable unselected checkboxes
   }
 });

Answer 1

要实现此功能，您可以使用 :not(:checked) 选择器来过滤可用的未选中框，使用 prop() 来禁用它们。

请注意，您还需要一个 else 条件，以便在取消选择复选框时再次启用复选框。

var $checkboxes = $('.myCheckBox').change(function() {
  var $checked = $checkboxes.filter(':checked'); 
  if ($checked.length >= 3) {
    $checkboxes.filter(':not(:checked)').prop('disabled', true);
  } else {
    $checkboxes.prop('disabled', false);
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" class="myCheckBox" name="addon-2811-workshop-normal-1[]" />
<input type="checkbox" class="myCheckBox" name="addon-2811-workshop-normal-1[]" />
<input type="checkbox" class="myCheckBox" name="addon-2811-workshop-normal-1[]" />
<input type="checkbox" class="myCheckBox" name="addon-2811-workshop-normal-1[]" />
<input type="checkbox" class="myCheckBox" name="addon-2811-workshop-normal-1[]" />
<input type="checkbox" class="myCheckBox" name="addon-2811-workshop-normal-1[]" />