如果複選框被選中/取消選中，啓用/禁用按鈕

Question

我在表中有多個複選框，並且已經編寫了用於選擇/取消選擇所有複選框以及啓用/禁用按鈕的代碼。 （全選複選框列的標題）

$(function(){ 
    $('#SelectAll').click(function(event) { 
    if(this.checked) { 
     // Iterate each checkbox 
     $(':checkbox').each(function() { 
      this.checked = true;       
     }); 
     $('#Assign').removeAttr("disabled"); 
    } 
    if(!this.checked) { 
     // Iterate each checkbox 
     $(':checkbox').each(function() { 
      this.checked = false; 
     }); 
     $('#Assign').attr("disabled","disabled"); 
    } 
}); 
}); 

雖然如果用戶決定逐個檢查的複選框，uncheckes都在他處理我怎麼寫了下面的代碼，以檢查是否所有的人都氾濫，禁用按鈕

$(function(){ 
$(':checkbox').click(function(event){ 
    if(this.checked){ 
     $('#Assign').removeAttr("disabled"); 
    } 
    if(!this.checked){ 
     //Need to put code here to check if all of them are unchecked 
      { 
       //disable the Assign button if all are unchecked by user 
       $('#Assign').attr("disabled","disabled"); 
       } 

    } 
}); 
}); 

Answer 1

總體功能可以被簡化爲

$(function(){ 
    var checkboxes = $(':checkbox:not(#SelectAll)').click(function(event){ 
     $('#Assign').prop("disabled", checkboxes.filter(':checked').length == 0); 
    }); 

    $('#SelectAll').click(function(event) { 
     checkboxes.prop('checked', this.checked); 
     $('#Assign').prop("disabled", !this.checked) 
    }); 
}); 

演示：Fiddle

Answer 2

我自己拿到這個，儘管你已經已經接受一個答案，將是以下幾點：

$('#selectAll').click(function(){ 
    var self = $(this); 
    self.prop('disabled', function(i,d) { 
     return !d; 
    }).closest('table').find('input[type="checkbox"]').prop('checked',true); 
}); 
$('input[type="checkbox"]').change(function(){ 
    var all = $(this).closest('tbody').find('input[type="checkbox"]'); 
    $('#selectAll').prop('disabled',function(){ 
     return all.length === all.filter(':checked').length; 
    }); 
}); 

JS Fiddle demo。

參考文獻：

• change()。
• closest()。
• filter()。
• prop()。

Answer 3

jQuery功能.attr("checked", true/false)和.removeAttr("checked")工作不好。更好地使用.click()功能。如果您評論6和9 javascript字符串並取消註釋7和11，您可以在Opera 12.16的this鏈接中看到它。 Select all和Deselect all按鈕僅在第一次使用未註釋的字符串時才起作用。
HTML：

<table><tbody> 
    <tr> 
     <td>Select all:</td> 
     <td><button onclick="chk(this, true);">Select all</button></td> 
    </tr> 
    <tr> 
     <td>Deselect all:</td> 
     <td><button onclick="chk(this, false);">Deselect all</button></td> 
    </tr> 
    <tr> 
     <td>First checkbox:</td> 
     <td><input type="checkbox" onchange="chk(this, null);" /></td> 
    </tr> 
    <tr> 
     <td>Second checkbox:</td> 
     <td><input type="checkbox" onchange="chk(this, null);" /></td> 
    </tr> 
    <tr> 
     <td>Enabled/disabled button:</td> 
     <td><button id="enDisButton" disabled="disabled">If you can click on me then I'm enabled</button></td> 
    </tr> 
</tbody></table> 

的Javascript：

function chk(elem, selectAll){ 
    // input/button -> td -> tr -> tbody 
    var tbody = $($(elem).parent().parent().parent()); 
    console.log("cb"); 
    if (selectAll === true) { 
     tbody.find('input:checkbox:not(:checked)').click(); 
     //tbody.find('input:checkbox:not(:checked)').attr("checked", true); 
    } else if (selectAll === false) { 
     tbody.find('input:checkbox:checked').click(); 
     //tbody.find('input:checkbox:checked').attr("checked", false); 
    } else { 
     //clicking on checkbox 
    } 
    // all unchecked 
    if (tbody.find('input:checkbox:checked').length == 0) { 
     $("#enDisButton").attr("disabled", "disabled"); 
    // all checked 
    } else if (tbody.find('input:checkbox:not(:checked)').length == 0) { 
     $("#enDisButton").removeAttr("disabled"); 
    } 
}