Question

first a quick description:

I have 4 tables (1 and 3 contain a line of checkboxes, 2 and 4 contain radio buttons).

What I am looking to do is have it so that when I select a checkbox in table 1, it updates tables 2,3,4 by setting the equivalent checkbox to ‘disabled’.

I figure the easiest option is to use the ‘VALUE’ attribute, as this will be the same on each table (e.g. the field with VALUE 4 on the first table will be the equivalent of the field with VALUE 4 on the others).

My tables all have a unique ID per table, and share a classname of ‘TableClassName’.
They all look similar to:

<table id="TableID1" class="TableClassName">
<tr>
<th class="CellGrey">1</td>
<th class="CellGrey ">2</td>
<th class="CellGrey ">3</td>
<th class="CellGrey ">4</td>
</tr>
<tr>
<td class="CellRed "><INPUT TYPE="checkbox" NAME="ignore[]" VALUE="1" checked></td>
<td class="CellWhite "><INPUT TYPE="checkbox" NAME="ignore[]" VALUE="2"></td>
<td class="CellWhite "><INPUT TYPE="checkbox" NAME="ignore[]" VALUE="3"></td>
<td class="CellWhite "><INPUT TYPE="checkbox" NAME="ignore[]" VALUE="4"></td>
</tr>
</table>

So far what I have is:

script type="text/javascript">
$(document).ready(function()
{
$("#TableID1").on('click','input:checkbox',function()
        { 
            if ($(this).attr('checked')) 
                {
                var $val = $(this).attr('value');
                //alert($val);
                $(".DBSelectTable td").function()
                    {
                        if ($(this).child().attr('VALUE') == $val)
                            {
                                $(this).child().attr('disabled');
                            } 
                    }

            }       
        }
    )
}       
);
</script>

But, I am getting the error:

“Uncaught Type Error: Object[object Object] has no method ‘function’ “

my theory is simple:

1. Select the #TableID1 table

2. find out which box in the first table has been clicked and get the VALUE attribute

3. Select the .TableClassName tables

4. check if any have the same VALUE, and add the ‘disabled’ attribute

but something is wrong, and I can’t see where to go from here. Any help would be appreciated.

Answer 1

note that I use prop instead if attr.
also, you can compare the values in the find function.

$(document).ready(function()
{
$("#TableID1").on('change','input:checkbox',function()
        { 
            if ($(this).prop('checked')) 
                {
                    var val = $(this).val();                
                    $(".DBSelectTable td").find("[value='"+ val +"']").prop('disabled',true)
                }       
        }
    )
}       
);