Checkboxes by class all selected

Question

I have a dynamic list of checkboxes all with the same class. I want to disable the submit button until all checkboxes in the class "group1" has been selected.

I also only want to do this, when this class is present on the page. I was did that part this way:

<input type="checkbox" class="group1" value="20" />
<input type="checkbox" class="group1" value="15" />
<input type="checkbox" class="group1" value="14" />

if ($(".group1").length > 0) {
 //run below code
 }

So I started like this, but am unsure of how to know when, all the checkboxes of that class are selected.

$(document).ready(function() {
     $(':input[type="submit"]').prop('disabled', true);
     $('input[type="text"]').keyup(function() {

    var checkboxes = $('.group1');
       if($(this).is(':checked')) {
           //if all chekced, enable submit button
           $(':input[type="submit"]').prop('disabled', false);
       } else {
        $(':input[type="submit"]').prop('disabled', true);
       }

    }
  });
});

I have seen this jQuery Array of all selected checkboxes (by class), but as the class can be of any length, I dont know how to check that all are selected.

score 3 · Answer 1 · answered Aug 09 '17 at 10:49

3

The easiest way to do this is to compare the total number of checkboxes to the number which are checked, like this:

var $group = $('.group1');
$(':input[type="submit"]').prop('disabled', $group.length != $group.filter(':checked').length);

answered Aug 09 '17 at 10:49

Rory McCrossan

331,213
40
305
339

score 2 · Accepted Answer · answered Aug 09 '17 at 10:47

You can simply check like this, total number of checkboxes and total number of checked checkboxes:

if ($('.group1').length == $('.group1:checked').length) {
  // all are checked...
  $(':input[type="submit"]').prop('disabled', false);
} else {
  $(':input[type="submit"]').prop('disabled', true);
}

score 0 · Answer 3 · edited Aug 09 '17 at 10:53

0

var selected = $(".group1:checked").length;

Count the checkboxes wich are checked.

edited Aug 09 '17 at 10:53

Rory McCrossan

331,213
40
305
339

answered Aug 09 '17 at 10:53

Schnatti

89
5

Could you expand this to show how it can help the OP? It seems to be half an answer – Rory McCrossan Aug 09 '17 at 10:54
I think that Blawless has 80% of the answer, only a tiny part is missing. You answer looks really smart ... – Schnatti Aug 09 '17 at 11:12

score 0 · Answer 4 · answered Aug 09 '17 at 11:14

First you will need to bind an event to checkboxes, to every time they change state to re-run the check to enable or disable the button;

Then you can check if all checkboxes are checked comparing the length of your group vs the length of your group filtered by :checked pseudo selector

And to change the state of the submit button, you can use .prop method, that accept an attribute and a state of this attribute as a second parameter. So:

$group1 = $(".group1");
$submit = $('[type=submit]');
if ($group1.length > 0) {
    $group1.on('change', checkBoxes)
}

function checkBoxes(){
    var $checked = $group1.filter(':checked'); 
    $submit.prop('disabled', $group1.length != $checked.length);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" class="group1" value="20" />
<input type="checkbox" class="group1" value="15" />
<input type="checkbox" class="group1" value="14" />
<input type="submit" disabled>

Checkboxes by class all selected

4 Answers4