I have a list of checkboxes in a table like this along with a button:-

<table id="mytable">
<tr><th>checked</th><th>id</th><th>text</th></tr>
<tr><td><input id="cb1" type="checkbox" name="checker1"/></td><td>123</td><td>abc</td></tr>
<tr><td><input id="cb2" type="checkbox" name="checker2"/></td><td>456</td><td>def</td></tr>
<tr><td><input id="cb3" type="checkbox" name="checker3"/></td><td>789</td><td>ghi</td></tr>
<tr><td><input id="cb4" type="checkbox" name="checker4"/></td><td>454</td><td>ghi</td></tr>
<tr><td><input id="cb5" type="checkbox" name="checker5"/></td><td>565</td><td>ghi</td></tr>
</table>

<input type="button" name="myjqbutton" value="My Jquery Button" id="jqb" disabled="true"/>

What i want to do is, only enable the button if 1 or more checkboxes are checked.

Initial thoughts are that I need to count the amount of checkboxes checked in the table, I can do this using a .each to count them into a variable.

var mytable= document.getElementById('mytable');
$('input:checkbox:checked', mytable).each(function() {
// whatever here
});

However, each checkbox will need a changed event to check the count and enable or disable the button depending if count > 0 or not.

Or is there an easier way of achieving this functionality I am looking for.

I have a list of checkboxes in a table like this along with a button:-

<table id="mytable">
<tr><th>checked</th><th>id</th><th>text</th></tr>
<tr><td><input id="cb1" type="checkbox" name="checker1"/></td><td>123</td><td>abc</td></tr>
<tr><td><input id="cb2" type="checkbox" name="checker2"/></td><td>456</td><td>def</td></tr>
<tr><td><input id="cb3" type="checkbox" name="checker3"/></td><td>789</td><td>ghi</td></tr>
<tr><td><input id="cb4" type="checkbox" name="checker4"/></td><td>454</td><td>ghi</td></tr>
<tr><td><input id="cb5" type="checkbox" name="checker5"/></td><td>565</td><td>ghi</td></tr>
</table>

<input type="button" name="myjqbutton" value="My Jquery Button" id="jqb" disabled="true"/>

What i want to do is, only enable the button if 1 or more checkboxes are checked.

Initial thoughts are that I need to count the amount of checkboxes checked in the table, I can do this using a .each to count them into a variable.

var mytable= document.getElementById('mytable');
$('input:checkbox:checked', mytable).each(function() {
// whatever here
});

However, each checkbox will need a changed event to check the count and enable or disable the button depending if count > 0 or not.

Or is there an easier way of achieving this functionality I am looking for.

• javascript
• jquery
• asp
• gridview

Share Improve this question Follow asked Mar 15, 2012 at 9:36 general exceptiongeneral exception 4,34299 gold badges5656 silver badges8383 bronze badges

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 5

You could do

$('#mytable input:checkbox').change(function(){
  $("#jqb").prop("disabled", $('#mytable input:checkbox:checked').length ===0);
}); 

It may do what you want:

$('#mytable input[type=checkbox]').click(function(){
if($('#mytable input[type=checkbox]:selected').size()) > 0) $("#jqb").attr('disabled', 'disabled');
else $('.someElement').removeAttr('disabled');

if ($('#mytable :checkbox:checked').length) {
    $('#jqb').prop('disabled', false); // Assumes disabled by default
}

Try this one;

 $("#jqb").prop("disabled", $("#mytable input:checkbox:checked']").length === 0);

change event is a must, but jQuery provides plex selector to reduce the work on counting checked ones:

$(':checkbox').change(function(e) {
    // for a performance considerationg, to reduce selector lookup, 
    // once a checkbox is checked itself, there must be one or more checkbox checked
    // then the selector finds checked checkbox whose id attribute starts with "cb"
    if (this.checked || $(':checkbox[id^="cb"]:checked).length >= 1) {
        // do stuff
    }
});