javascript toggle all and disable button at same time

Question

I have HTML form with checkboxes "delete" array and one checkbox "togglechbx" to toggle all checkboxes to check/uncheck. So when none of delete[] is checked, "delete-selected-btn" has to be disabled and checkbox "togglechbx" has to be uncheck automatically.

The javascript below does the trick, but i have it combined from different stackoverflow examples. That's why it looks so ugly and messy. Could you guys take a look, if there is some way to make it shorter and cleaner? Thank you in advance.

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

nnnnnn · Accepted Answer · 2013-08-27 01:11:54Z

Here's what I came up with:

(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 amazing demo: 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.)

Of course, master checkbox must act exactly like here in your script, not like in the one i've made.

Thierry J · Accepted Answer · 2013-08-27 03:38:34Z

1

You can try something like this:

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

edited Aug 27, 2013 at 3:38

answered Aug 27, 2013 at 0:58

Thierry J

2,19717 silver badges27 bronze badges

5 Comments

nnnnnn Over a year ago

Why do you need to change the input's name attribute? The current name is legal, or those elements already have a common class.

Thierry J Over a year ago

True, I just don't like using brackets in names :) Updated code using classes.

nnnnnn Over a year ago

Yeah, I'm not a big fan of brackets in names either, but I assume the OP is using PHP.

Shirker Over a year ago

jsfiddle.net/7uqYc on toggle all the button is not getting active, only on checking single checkboxes

Thierry J Over a year ago

Forgot to change one of the [name='delete'] to .delete-img, it's fixed.

Mahmoud Samy · Accepted Answer · 2013-08-27 00:53:00Z

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

answered Aug 27, 2013 at 0:53

Mahmoud Samy

2703 silver badges11 bronze badges

1 Comment

nnnnnn Over a year ago

Well that's definitely shorter than the OP's code, but it does something completely different, so...

Collectives™ on Stack Overflow

javascript toggle all and disable button at same time

3 Answers 3

2 Comments

5 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related