Disable all check boxes inside a table with jquery

Question

I need to disable all the check boxes inside a table cell when clicking on a hyperlink inside the same table.

I'm using the following jquery code to select all the check boxes nested inside the table.

$el = $(this).parents('table:eq(0)')[0].children('input[type="checkbox"]');
$($el).attr('checked', true);

For some reason this piece of code is not working.

Can anyone show me how to fix it?

Answer 1

Disable?

$("a.clickme").click(function(){
  $(this)                    // Link has been clicked
    .closest("td")           // Get Parent TD
    .find("input:checkbox")  // Find all checkboxes
    .attr("disabled", true); // Disable them
});

or Checked?

$("a.clickme").click(function(){
  $(this)                    // Link has been clicked
    .closest("td")           // Get Parent TD
    .find("input:checkbox")  // Find all checkboxes
    .attr("checked", false); // Uncheck them
});

Answer 2

$('table input[type=checkbox]').attr('disabled','true');

if you have an id for the table

$('table#ID input[type=checkbox]').attr('disabled','true');

Answer 3

Your code can be a lot simpler:

$el = $(this).parents('table:eq(0)')[0].children('input[type="checkbox"]');

Could be:

$el = $(this).parents('table:first :checkbox');

Then to disable them:

$el.attr('disabled', 'disabled');

or to check them:

$el.attr('checked', 'checked');

or to uncheck them:

$el.removeAttr('checked');

or to enable them:

$el.removeAttr('disabled');

Answer 4

See also: selector/checkbox

jQuery("#hyperlink").click(function() {
  jQuery('#table input:checkbox').attr('disabled', true);
  return false;
});