Wilfried February 2016

Check one, some or all checkboxes and activate a proceed button does not work

The "check all" / "uncheck all" button lets me check or uncheck all checkboxes in my form. The "proceed..." button should getting active as soon as one, more or all checkboxes are checked.

This works fine as long as I check the checkboxes manually but does not work when I use the "check all" button. In this case the "proceed..." button stays inactive.

I tried several other solutions with simliar results. Especially this one was very interesting but I was not able to change it to my needs.

Some help would be great.

I have the following HTML code.

<form id="container">
     <input type="button" class="check" value="check all">
     <input class="cb" type="checkbox" value="true"></input>
     <input class="cb" type="checkbox" value="true"></input>
     <input class="cb" type="checkbox" value="true"></input>
     <input class="cb" type="checkbox" value="true"></input>
     <button type="submit" id="proceedBut">proceed...</button>
</form>

with the following jquery code

$('.check:button').click(function(){
     var checked = !$(this).data('checked');
     $('input:checkbox').prop('checked', checked);
     $(this).val(checked ? 'uncheck all' : 'check all' )
     $(this).data('checked', checked);
});

var checkBoxes = $('#container .cb');
checkBoxes.change(function () {
    $('#proceedBut').prop('disabled', checkBoxes.filter(':checked').length < 1);
});
$('#container .cb').change();

Answers


mazedlx February 2016

checkboxes.change doesn't fire when clicking the check all button, added one line to the .check:button.click() event

$('.check:button').click(function(){
    var checked = !$(this).data('checked');
    $('input:checkbox').prop('checked', checked);
    $(this).val(checked ? 'uncheck all' : 'check all' )
    $(this).data('checked', checked);
    $('#proceedBut').prop('disabled', checkBoxes.filter(':checked').length < 1);
});


Azim February 2016

Add checkBoxes.first().change() to the click event of .check:button to trigger the change event of first .cb like following.

var checkBoxes = $('#container .cb');

$('.check:button').click(function() {
  var checked = !$(this).data('checked');
  $('input:checkbox').prop('checked', checked);
  $(this).val(checked ? 'uncheck all' : 'check all');
  $(this).data('checked', checked);

  checkBoxes.first().change();
});

checkBoxes.change(function() {
  $('#proceedBut').prop('disabled', checkBoxes.filter(':checked').length < 1);
});
checkBoxes.first().change();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="container">
     <input type="button" class="check" value="check all">
     <input class="cb" type="checkbox" value="true"></input>
     <input class="cb" type="checkbox" value="true"></input>
     <input class="cb" type="checkbox" value="true"></input>
     <input class="cb" type="checkbox" value="true"></input>
     <button type="submit" id="proceedBut">proceed...</button>
</form>

Post Status

Asked in February 2016
Viewed 1,839 times
Voted 7
Answered 2 times

Search




Leave an answer