JQuery - Disable all checkboxes not inside the same table

Question

I have some dynamically generated table, each looking somewhat like this, with a dynamic ID

<table class="innerDatTable" id="dynamically-generated'>
    <caption><h2>Project #</h2></caption>
    <thead>
        <tr>
            <th></th>
            <th>SubProject Name</th>
            <th>Date Completed</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><input type="checkbox" /></td>
            <td><span>SubProjectName</span></td>
            <td><span>Date</span></td>
        </tr>
    </tbody>
</table>

When a user click on any of the checkboxes within a table, all the other checkboxes that are not inside this table should be disabled (so they can only select subprojects from the same project). Vice versa, if the user unchecks all the boxes inside a table, all the checkboxes become available again. I tried something like this...

if ($('table input:checked').length > 0) {
    checked = $(this).prop('checked');
    ($('table input[type=checkbox]').attr('id').not($(this).attr('id')))
    .prop('disabled', checked);
}

The logic here is that if any boxes are checked within the table, disable all the other checkboxes that do not have the same ID as this table (again, the IDs are not known ahead of time). I mainly followed the answer in this question and tried to alter it to my needs, but I'm not able to get the desired effect (or any effect, for that matter).

Do I need to put all the other table IDs in an array, and disable each of them in a loop? Could someone point me in the right direction in terms of syntax, or maybe better logic?

Disabling an input doesn't uncheck it, just so you know. – Etheryte Apr 22 '15 at 21:35 — Etheryte, Apr 22 '15 at 21:35

score 2 · Accepted Answer · answered Apr 22 '15 at 21:43

Start by finding all the checkboxes and adding an event handler.
Then find the closest table to the changed checkbox, and then all checkboxes inside that table.

Now that we have this, we can filter out the checkboxes in the current table and get all the rest so we can disable them if any checkbox in the current table is checked, and we can check that with .is(':checked') on the collection.

var boxes = $('table input[type="checkbox"]')

boxes.on('change', function() {
    var table  = $(this).closest('table'),
        inputs = table.find('input[type="checkbox"]');

    boxes.not( inputs ).prop('disabled', inputs.is(':checked'));
});

score 0 · Answer 2 · edited May 23 '17 at 11:58

When I have to deal with setting and/or unsettling elements in the DOM, I will usually assign a specific class to the active item (such as "active"). That way, I can iterate through the DOM, unset inactive elements, and not worry about the current "active" element.

In other words, you'd want to do something like (pseudocode):

$("parent element").find("checkbox elements").not(".active").setInactive()

This method does require code to set and unset classes on specific elements in the DOM. For example, if you add an active class to a clicked element, but do not remove it, this method will not work (because there will be multiple active elements).

Of course, you will need to make sure that you use the proper functions to unset inactive checkboxes as well. This SO question should lead you in the right direction...

JQuery - Disable all checkboxes not inside the same table

2 Answers2