多个复选框中的一个应始终保持未选中状态

One checkbox of many should always stay unchecked

本文关键字：始终保持 一个 状态 复选框      更新时间：2024-02-03

有很多关于JavaScript和条件检查复选框的主题，但我还没有找到一个与我的情况相匹配的主题。

我的用例：我生成了许多行，每行都有复选框，假设数字是n。现在，用户应该只能检查其中的n-1。换言之，当我们有4个复选框，其中3个被选中时，最后一个应该被禁用。如果只选中了4个复选框中的2个，则所有复选框都可用。

我试过：

var $checks = $('input:checkbox').click(function (e) {
        var numChecked = $checks.filter(':checked').length;
        var lastUnchecked = $checks.prop('checked', false);
        if (numChecked = $checks.length - 1) {
            lastUnchecked.disabled = true;
        }
        else {
            //enable checkbox that was disabled before
            lastUnchecked.disabled = false;
        }
    });

但这不起作用，因为var lastUnchecked = $checks.prop('checked', false);返回所有复选框，而不仅仅是未选中的

试试这个。

逻辑：更改时，首先重新启用所有复选框。然后根据检查的数量重新确定是否需要禁用任何。

var table = $('table'), cbs = $(':checkbox');
table.on('change', ':checkbox', function(evt) {
    cbs.prop('disabled', false);
    if (cbs.filter(':checked').length == cbs.length - 1) 
        cbs.not(':checked').prop('disabled', 1);
})

Fiddle。

每次用户检查其中一个时，尝试对检查的项目进行计数：

$(document).on('change', '.chk', function() {
  var that = $(this);
  var par = that.closest('ul');
  var max = par.find('.chk').length - 1;
  var checked = par.find('.chk').filter(':checked').length;
  if (checked < max) {
    par.find('.chk').prop('disabled', '');
  } else {
    par.find('.chk').not(':checked').prop('disabled', 'disabled');
  }               
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<ul>
  <li><input class="chk" type="checkbox" /> Checkbox</li>  
  <li><input class="chk" type="checkbox" /> Checkbox</li>  
  <li><input class="chk" type="checkbox" /> Checkbox</li>  
  <li><input class="chk" type="checkbox" /> Checkbox</li>  
  <li><input class="chk" type="checkbox" /> Checkbox</li>  
</ul>

这是更简单的

$(document).ready(function(){
  var numBox;
  var $checks = $('input:checkbox').click(function (e) {
      var numChecked = $checks.filter(':checked').length;
      if (numChecked < numBox - 1) {
        $checks.filter(':disabled').prop('disabled', false);
      } else {
        $checks.not(':checked').prop('disabled', true);
      }
  });
  numBox = $check.length;
});
相关文章：