Enable/disable submit button when any/no checkbox in form is checked

Question

I am trying to use jQuery to dynamically enable/disable a submit button for a form.

The HTML:

<form id="user-add-to-group">
  <table class="group-list">
    <tbody>
      <tr>
        <th>Voornaam</th>
        <th>Achternaam</th>
        <th>S/P-nummer</th>
        <th>Email</th>
        <th>Type</th>
      </tr>
      <tr>   
        <td>Name</td>
        <td>Surname</td>
        <td>No.</td>
        <td>[email protected]</td>
        <td>student</td>
        <td><input type="checkbox" name="user_add_to_group[]" value="75F0CE8F-4B6F-4E17-BC7B-0B06AAD84625"></td>
      </tr>
    </tbody>
  </table>
  <button disabled="disabled" type="button" id="participant_add_btn" name="participant_add_btn" class="btn btn-primary">Add</button>                            
</form>

And the jQuery:

$('table.group-list tr').on("click", function(){
  $(this).find("input[type=checkbox]").trigger('click');
    if($("#user-add-to-group input[type=checkbox]:checked").length>0){
      $("#participant_add_btn").prop("disabled","false");
    }
    else {
      $("#participant_add_btn").prop("disabled","disabled");
    }
});

I want to make the entire table row clickable, so the jQuery triggers a click event when the tr is clicked. This works, but I cannot seem to figure out why my button won't be enabled afterwards. I want to enable it when any checkbox within the form is checked, and disable it when none of them are.

If more info is needed, please let me know.

Rayon · Accepted Answer · 2016-07-19 09:54:26Z

1

jQuery.prop expects value to be Boolean, any string which is not empty is considred as true as it is truthy value

$('table.group-list tr').on("click", function() {
  $(this).find("input[type=checkbox]").trigger('click');
  $("#participant_add_btn").prop("disabled", !$("#user-add-to-group input[type=checkbox]:checked").length);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form id="user-add-to-group">
  <table class="group-list">
    <tbody>
      <tr>
        <th>Voornaam</th>
        <th>Achternaam</th>
        <th>S/P-nummer</th>
        <th>Email</th>
        <th>Type</th>
      </tr>
      <tr>
        <td>Name</td>
        <td>Surname</td>
        <td>No.</td>
        <td>[email protected]</td>
        <td>student</td>
        <td>
          <input type="checkbox" name="user_add_to_group[]" value="75F0CE8F-4B6F-4E17-BC7B-0B06AAD84625">
        </td>
      </tr>
    </tbody>
  </table>
  <button disabled="disabled" type="button" id="participant_add_btn" name="participant_add_btn" class="btn btn-primary">Add</button>
</form>

edited Jul 19, 2016 at 9:54

answered Jul 19, 2016 at 9:48

Rayon

36.6k5 gold badges54 silver badges78 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

lennyklb Over a year ago

Accepted for most efficient code. Elegant. Thank you!

Rayon Over a year ago

@LennartKloppenburg Happy to help!

Milind Anantwar · Accepted Answer · 2016-07-19 10:05:56Z

You need to pass Boolean argument instead of string while setting the property value.

$('#participant_add_btn').prop('disabled', false);

or use .removeAttr("disabled")

$('#participant_add_btn').removeAttr("disabled");

Your code will not work on click of checkbox. For that,you need to check the target of clicked element, if it is already checkbox then do not trigger the click event for it:

Working Snippet:

$('table.group-list tr').on("click", function(e){
  if($(e.target).is(':not(:checkbox)'))
   $(this).find("input[type=checkbox]").trigger('click');
   $("#participant_add_btn").prop("disabled",$("#user-add-to-group input[type=checkbox]:checked").length == 0);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="user-add-to-group">
  <table class="group-list">
    <tbody>
      <tr>
        <th>Voornaam</th>
        <th>Achternaam</th>
        <th>S/P-nummer</th>
        <th>Email</th>
        <th>Type</th>
      </tr>
      <tr>   
        <td>Name</td>
        <td>Surname</td>
        <td>No.</td>
        <td>[email protected]</td>
        <td>student</td>
        <td><input type="checkbox" name="user_add_to_group[]" value="75F0CE8F-4B6F-4E17-BC7B-0B06AAD84625"></td>
      </tr>
    </tbody>
  </table>
  <button disabled="disabled" type="button" id="participant_add_btn" name="participant_add_btn" class="btn btn-primary">Add</button>                            
</form>

Ryan · Accepted Answer · 2016-07-19 09:48:28Z

0

$('#toggle').click(function () {
//check if checkbox is checked
if ($(this).is(':checked')) {

    $('#sendNewSms').removeAttr('disabled'); //enable input

} else {
    $('#sendNewSms').attr('disabled', true); //disable input
}

});

Check here.

answered Jul 19, 2016 at 9:48

Ryan

9871 gold badge7 silver badges19 bronze badges

Collectives™ on Stack Overflow

Enable/disable submit button when any/no checkbox in form is checked

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related