如何使用jQuery中的foreach禁用所有复选框

Question

我想在全部“全选”时禁用所有复选框。

这怎么可能使用jQuery？

的JavaScript：

这里categories[]是复选框的名字是在foreach循环

function checkAll(source) { 
    checkboxes = document.getElementsByName('categories[]'); 

    for(var i=0, n=checkboxes.length;i<n;i++) { 
     //checkboxes[i].checked = source.checked; 
     checkboxes[i].disabled = source.disabled; 
    } 
} 

Answer 1

只需使用prop('disabled', true)

$('#mainChk').on('click', function(){ 
 
    var categories = $('.categories'); 
 
    categories.prop('disabled', !categories.prop('disabled')); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input id="mainChk" type="checkbox" > Main 
 
<input type="checkbox" class="categories"> First 
 
<input type="checkbox" class="categories"> Second 
 
<input type="checkbox" class="categories"> Third

Answer 2

给你所有的复选框一个类（例如：class ='ck'）。

然后：

$('.ck').each(function(){ 
$(this).prop('disabled', true); 
}) 

Answer 3

function uncheckAll() { 
 
    $('input:checkbox').removeAttr('checked'); 
 
} 
 

 
function disableAll() { 
 
    $('input:checkbox').attr('disabled','true'); 
 
}

<input type="checkbox" checked>A<br/> 
 
<input type="checkbox" checked>B<br/> 
 
<input type="checkbox">C<br/> 
 
<input type="checkbox" checked>D<br/> 
 
<input type="checkbox">E<br/> 
 
<button onclick="uncheckAll()">Uncheck all</button> 
 
<button onclick="disableAll()">Disable all</button> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 4

这会为你工作。

 <input type="checkbox" checked>A<br/> 
    <input type="checkbox" checked>B<br/> 
    <input type="checkbox">C<br/> 
    <input type="checkbox" checked>D<br/> 
    <input type="checkbox">E<br/> 
    <button class="disableAll">Disable all</button> 

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
     <script> 
     $(document).ready(function(){ 
     $(".disableAll").click(function(){ 
     $('input[type=checkbox]').each(function(){ 
     $(this).prop('disabled', true); 
    }) 
    }); 
}); 

Answer 5

您可以启用像这样的jQuery禁用复选框。

$('#checkAll:checkbox').change(function() { 
    if($(this).attr("checked")) $('input:checkbox').attr('checked','checked'); 
    else $('input:checkbox').removeAttr('checked'); 
}); 

看看这个demo。