javascript toggle all並禁用按鈕同時

Question

我有HTML格式的複選框「刪除」數組和一個複選框「togglechbx」切換所有複選框檢查/取消選中。因此，當沒有選中delete []時，必須禁用「delete-selected-btn」，並且必須自動取消選中「togglechbx」複選框。

下面的javascript是訣竅，但我已經從不同的計算器例子中結合了它。這就是爲什麼它看起來如此醜陋和混亂。你們能否看看，如果有辦法讓它變得更短，更清潔？先謝謝你。

<form id="show-images"> 
<input id="togglechbx" type="checkbox" onClick="toggle(this);" /> 
<input type="checkbox" class="delete-img" name="delete[]" value="1"/> 
<input type="checkbox" class="delete-img" name="delete[]" value="2"/> 
<input type="checkbox" class="delete-img" name="delete[]" value="3"/> 
<button id="delete-selected-btn" type="submit" disabled="disabled">Delete selected</button></form> 
<script> 
     $('.delete-img').change(function(){ 
     var arrlenght = $("#show-images input:checkbox:checked").length; 
     if (arrlenght > 0){ 
     if (arrlenght == 1 && document.getElementById("togglechbx").checked) { 
      $("#togglechbx").prop("checked", false); 
      $('#delete-selected-btn').attr("disabled", "disabled"); 
      return false; 
     } 
     // any one from delete is checked 
      $('#delete-selected-btn').removeAttr("disabled"); 
     }else{ 
     // none is checked 
       $('#delete-selected-btn').attr("disabled", "disabled"); 
     }}); 

    function toggle(source) { 
       checkboxes = document.getElementsByName('delete[]'); 
       for(var i=0, n=checkboxes.length; i<n; i++) { 
       checkboxes[i].checked = source.checked; 
       if ($("#show-images input:checkbox:checked").length > 0){ 
         $('#delete-selected-btn').removeAttr("disabled"); 
       }else{ 
       // none is checked 
         $('#delete-selected-btn').attr("disabled", "disabled"); 
       } 
       } 
    } 
</script> 

Answer 1

這就是我想出了：

(function() { 
    var $delBtn = $("#delete-selected-btn"), 
     $delCBs = $("input.delete-img").click(function() { 
      var checkedCount = $delCBs.filter(":checked").length; 
      $delBtn.prop("disabled", checkedCount === 0); 
      if (checkedCount === 0) 
      $toggleCB.prop("checked", false); 
      else if (checkedCount == $delCBs.length) 
      $toggleCB.prop("checked", true); 
     }), 
     $toggleCB = $("#togglechbx").click(function() { 
      $delCBs.prop("checked", this.checked); 
      $delBtn.prop("disabled", !this.checked); 
     }); 
})(); 

Jawdroppingly驚人的演示：http://jsfiddle.net/Wfdy3/3/

什麼我上面做的是，只要任何的delete-img複選框被點擊我發現它們有多少被選中，然後禁用delete-selected-btn按鈕，如果該數字爲零。然後，如果其他選項未被選中，if/else將取消選中主切換複選框;如果所有其他選項都被選中，則檢查主切換 - 如果選中了一些而不是全部，則不會更改主複選框的狀態。如果您希望主複選框的自動檢查工作 - 如果您只希望檢查是否所有其他檢查都可以，您可以用$toggleCB.prop("checked", checkedCount === $delCBs.length);替換四行if/else結構爲如下圖所示：http://jsfiddle.net/Wfdy3/4/

然後在主切換複選框我只是將所有其他複選框以相同的狀態主人，啓用或禁用delete-selected-btn按鈕酌情單擊處理程序。

請注意，匿名函數只是保持變量超出全局範圍，我使用點擊處理程序，而不是更改處理程序，因爲（我隱約記得）在某些瀏覽器中，通過鍵盤更改複選框時在複選框失去焦點之前，更改事件不會發生，但單擊事件可以使用鼠標或鍵盤。也

注意.prop()是適當的jQuery的方法來使用設置禁用狀態，不attr()和removeAttr()（我假設你正在使用jQuery的新版本足以能夠使用.prop()給你自己用它。在一個地方）

Answer 2

<form id="show-images"> 
<div class="toggle"> 
<input id="togglechbx" type="checkbox" onClick="toggle(this);" /> 
<input type="checkbox" class="delete-img" name="delete[]" value="1"/> 
<input type="checkbox" class="delete-img" name="delete[]" value="2"/> 
<input type="checkbox" class="delete-img" name="delete[]" value="3"/> 
<button id="delete-selected-btn" type="submit" >Delete selected</button> 
</div> 
</form> 

的JavaScript

$("#show-images") .submit(function(){ 

$(".toggle") .toggle(); 

$('#delete-selected-btn').attr('disabled', ''); 

return false; 
}); 

Answer 3

你可以嘗試這樣的事情：

$(function() { 
    $("#show-images>.delete-img").change(function() { 
     if ($("#show-images>.delete-img:checked").length) { 
      $("#delete-selected-btn").removeAttr("disabled"); 
     } else { 
      $("#delete-selected-btn").attr("disabled", "disabled"); 
     } 

     $("#togglechbx").prop("checked", $("#show-images>.delete-img").length == $("#show-images>.delete-img:checked").length); 
    }); 

    $("#togglechbx").change(function() { 
     $("#show-images>.delete-img").each(function (i, e) { 
      $(e).prop("checked", $("#togglechbx").prop("checked")); 
     }); 
     $("#show-images>.delete-img").change(); 
    }); 
});