許多應該總是保持未選中的複選框

Question

關於JavaScript和條件檢查複選框有很多主題，但我沒有找到與我的案例相匹配的主題。

我的用例：我已經生成了每行都有複選框的行數，假設這個數字是n。現在用戶應該只能檢查它們的n-1。換句話說，當我們有4個複選框，並且選擇了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);回報所有複選框，不僅選中

Answer 1

試試這個。

邏輯：在更改時，先重新啓用所有複選框。然後根據檢查的次數重新計算是否需要禁用任何操作。

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。

Answer 2

試着數的檢查的項目每次用戶checkes其中之一：

$(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>

Answer 3

這是簡單

$(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; 
});