使用Jquery禁用复选框

Question

如何在有限复选框被选中后禁用复选框？ 我想创建两种不同的形式，其中第一种形式的用户只能选中3个复选框，其余的复选框应该被禁用，而在第二种形式中只能选择两个复选框，其余的应该禁用。

Answer 1

这里有一个简单的代码片段，应该可以做你想做的。只需调整表单上的自定义属性data-checksallowed，它应该处理任意数量的允许复选框。

$('[data-checksallowed]').on("change", 'input[type="checkbox"]', function() { 
 
    var parent = $(this).closest("[data-checksallowed]"); 
 
    var checksallowed = parent.data('checksallowed'); 
 
    var checkboxes = parent.find('input[type="checkbox"]'); 
 
    var checkedboxes = checkboxes.filter(':checked'); 
 
    var uncheckedboxes = checkboxes.not(checkedboxes); 
 
    
 
    if (checkedboxes.length == checksallowed) 
 
    uncheckedboxes.prop('disabled', true); 
 
    else 
 
    uncheckedboxes.prop('disabled', false); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<form data-checksallowed="3"> 
 
    <input type="checkbox" /> 
 
    <input type="checkbox" /> 
 
    <input type="checkbox" /> 
 
    <input type="checkbox" /> 
 
    <input type="checkbox" /> 
 
</form> 
 
<form data-checksallowed="2"> 
 
    <input type="checkbox" /> 
 
    <input type="checkbox" /> 
 
    <input type="checkbox" /> 
 
    <input type="checkbox" /> 
 
    <input type="checkbox" /> 
 
</form>

Answer 2

像这样的事情会为你工作。

<div id="chks"> 
<input type="checkbox" value="1" /> 1 
<input type="checkbox" value="2" /> 2 
<input type="checkbox" value="3" /> 3 
<input type="checkbox" value="4" /> 4 
<input type="checkbox" value="5" /> 5 
<input type="checkbox" value="6" /> 6 
<input type="checkbox" value="7" /> 7 
<input type="checkbox" value="8" /> 8 
</div> 

JavaScript的将是这样的：

$('#chks input[type="checkbox"]').click(function(){ 
    // get the count of all checked boxes 
    var cnt = $('#chks input[type="checkbox"]:checked').length; 
    if(cnt == 3){ 
     // if cnt is equal to 3 disable all checkboxes that are NOT checked 
     // you want to leave the checked ones enabled 
     $('#chks input[type="checkbox"]').not(':checked').attr('disabled', 'disabled'); 
    }else{ 
     // if count is not equal to 3 make sure the unchecked are enabled 
     // count should never be more than 3 because this will disable them 
     $('#chks input[type="checkbox"]').not(':checked').removeAttr('disabled'); 
    } 

});