jquery - 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 checkboxes in form. "proceed..." button should getting active one, more or checkboxes checked.
this works fine long check checkboxes manually not work when use "check all" button. in case "proceed..." button stays inactive.
i tried several other solutions simliar results. this one interesting not able change needs.
some great.
i have 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 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();
add checkboxes.first().change()
click event of .check:button
trigger change event of first .cb
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>
Comments
Post a Comment