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

【问题标题】：How to disable unselected checkboxes when a limit is reached达到限制时如何禁用未选中的复选框
【发布时间】：2019-03-20 10:57:53
【问题描述】：

我想知道如何使用 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
   }
 });

【问题讨论】：

你能显示你的复选框的 HTML 代码吗？
jQuery - checkbox enable/disable的可能重复
我用的是Wordpress的插件...相关的元素都写在上面了。

标签： javascript jquery

【解决方案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[]" />

【讨论】：

【解决方案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'>

【讨论】：

请花时间描述问题是什么以及为什么这个解决方案有帮助。请记住，我们在这里是为了教育人们，而不仅仅是在他们身上转储代码。
您应该在取消选中复选框时重新启用复选框。
@Sanguinary 已修复
优雅的解决方案。

【解决方案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[]" />

【讨论】：