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[]" />

Answer 2

尝试-我们将禁用标志设置为未选中的输入

$('input').click(function() {
  checkboxesValidate();
})

function checkboxesValidate() {
 $('input:not(:checked)').attr("disabled", $('input:checked').length === 3);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type='checkbox'><input type='checkbox'><input type='checkbox'><input type='checkbox'><input type='checkbox'><input type='checkbox'><input type='checkbox'><input type='checkbox'>

Answer 3

您可以使用：

$(".myCheckBox:not(:checked)").prop('disabled', true);

要禁用所有not checked复选框。

一旦选中少于3个复选框，您便可以重新启用其复选框（在else中）

请参见以下示例：

$('.myCheckBox').on('input', function() {
  var checkBoxLenghtStandard = $('.myCheckBox:checked').length;
  if (checkBoxLenghtStandard >= 3) {
    $(".myCheckBox:not(:checked)").prop('disabled', true);
  } else {
    $('.myCheckBox[disabled]').prop('disabled', false)
  }
});

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

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

3 个答案: