0

我有带有复选框“删除”数组和一个复选框“togglechbx”的 HTML 表单，用于切换所有复选框以选中/取消选中。因此，当没有选中任何 delete[] 时，必须禁用“delete-selected-btn”并且必须自动取消选中复选框“togglechbx”。

下面的 javascript 可以解决问题，但我将它与不同的 stackoverflow 示例结合在一起。这就是为什么它看起来如此丑陋和凌乱。你们能看看，如果有什么方法可以让它更短更干净吗？先感谢您。

<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>
4

3 回答 3

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

令人惊叹的演示：http: //jsfiddle.net/Wfdy3/3/

What I'm doing above is whenever any of the delete-img checkboxes is clicked I find out how many of them are checked and then disable the delete-selected-btn button if that number is zero. Then the if/else unchecks the master toggle checkbox if none of the others is checked, or checks the master toggle if all of the others are checked - it doesn't change the state of the master checkbox if some but not all are checked. I'm not clear from your description if that's how you wanted the auto-checking of the master checkbox to work - if you only wanted it checked if all the others were checked you could replace the four-line if/else structure with $toggleCB.prop("checked", checkedCount === $delCBs.length); as shown here: http://jsfiddle.net/Wfdy3/4/

Then in the click handler for the master toggle checkbox I simply set all of the other checkboxes to the same state as the master, and enable or disable the delete-selected-btn button as appropriate.

Note that the anonymous function is just to keep the variables out of the global scope, and I'm using click handlers rather than change handlers because (I vaguely recall that) in some browsers when a checkbox is changed via the keyboard the change event doesn't occur until the checkbox loses focus, but the click event works with mouse or keyboard.

Note also that .prop() is the appropriate jQuery method to use to set the disabled state, not attr() and removeAttr() (I assume you're using a new enough version of jQuery to be able to use .prop() given that you used it yourself in one place.)

于 2013-08-27T00:55:30.857 回答
1

你可以尝试这样的事情：

$(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();
    });
});
于 2013-08-27T00:58:53.857 回答
0 
<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;
});
于 2013-08-27T00:53:00.507 回答