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

Popular posts from this blog

javascript - jQuery: Add class depending on URL in the best way -

caching - How to check if a url path exists in the service worker cache -

Redirect to a HTTPS version using .htaccess -