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

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

if you have an id for the table

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

Answer 2

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 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;
});

Answer 5

This is my solution

// Action sur le checkbox
        $("#tabEmployes thead tr th:first input:checkbox").click(function() {
            var checked = $(this).prop('checked');
            $("#tabEmployes tbody tr td:first-child input:checkbox").each(function() {
                $(this).prop('checked',checked);
            });
        });

Answer 6

------------------------------- HTML Code below ------------------------------

<table id="myTable">
    <tr>
        <td><input type="checkbox" checked="checked" /></td>
        <td><input type="checkbox" checked="checked" /></td>
        <td><input type="checkbox" /></td>
        <td><input type="checkbox" /></td>
    </tr>
</table>

<input type="button" onclick="callFunction()" value="Click" />

------------------------------- JQuery Code below -----------------------------

    <script type="text/javascript">
    function callFunction() {
        //:
        $('table input[type=checkbox]').attr('disabled', 'true');
    }
</script>

Answer 7

// Enable/Disable All Checkboxes

$('#checkbox').click(function() {

    var checked = $(this).attr('checked');
    var checkboxes = '.checkboxes input[type=checkbox]';

    if (checked) {
        $(this).attr('checked','checked');
        $(checkboxes).attr('disabled','true');
    } else {
        $(this).removeAttr('checked');
        $(checkboxes).removeAttr('disabled');
    }
});