Question

I’m still confused with jQuery selector.

I have this table:

<table boreder="5" width="100%">
<tbody>
    <tr>
        <td width="5%"></td>
        <td width="15%">Menu</td>
        <td width="15%">Create</td>
        <td width="15%">Retrieve</td>
        <td width="15%">Update</td>
        <td width="15%">Delete</td>
    </tr>
    <tr>
        <td width="5%"><input type="checkbox" name="menu_cd[]" /></td>
        <td width="15%">SISTEM</td>
        <td width="15%"><input type="checkbox" disabled name="rule_tp[]" /></td>
        <td width="15%"><input type="checkbox" disabled name="rule_tp[]" /></td>
        <td width="15%"><input type="checkbox" disabled name="rule_tp[]" /></td>
        <td width="15%"><input type="checkbox" disabled name="rule_tp[]" /></td>
    </tr>
     <tr>
        <td width="5%"><input type="checkbox" name="menu_cd[]" /></td>
        <td width="15%">ADMIN</td>
        <td width="15%"><input type="checkbox" disabled name="rule_tp[]" /></td>
        <td width="15%"><input type="checkbox" disabled name="rule_tp[]" /></td>
        <td width="15%"><input type="checkbox" disabled name="rule_tp[]" /></td>
        <td width="15%"><input type="checkbox" disabled name="rule_tp[]" /></td>
    </tr>
</tbody>
</table>

if I checked a checkbox in the left, the other checkbox in the same row is enable and vice versa
and i have try with this script:

$(document).ready(function() {

$("input[name=menu_cd[]]").live("click", function({
      if(!$(this).is(":checked")){
            $("").attr("disabled", true);
      }else{
            $("").removeAttr("disabled");
      }    
}));

I need help to fill the selector!

Answer 1

HTML:

<table width="100%" id="menu">
<tbody>
    <tr>
        <td width="5%"></td>
        <td width="15%">Menu</td>
        <td width="15%">Create</td>
        <td width="15%">Retrieve</td>
        <td width="15%">Update</td>
        <td width="15%">Delete</td>
    </tr>
    <tr>
        <td><input type="checkbox" name="menu_cd[]" /></td>
        <td>SYSTEM</td>
        <td><input type="checkbox" name="rule_tp[]" /></td>
        <td><input type="checkbox" name="rule_tp[]" /></td>
        <td><input type="checkbox" name="rule_tp[]" /></td>
        <td><input type="checkbox" name="rule_tp[]" /></td>
    </tr>
     <tr>
        <td><input type="checkbox" name="menu_cd[]" /></td>
        <td>ADMIN</td>
        <td><input type="checkbox" name="rule_tp[]" /></td>
        <td><input type="checkbox" name="rule_tp[]" /></td>
        <td><input type="checkbox" name="rule_tp[]" /></td>
        <td><input type="checkbox" name="rule_tp[]" /></td>
    </tr>
</tbody>
</table>

JS:

$(document).ready(function() {
    $('#menu tr').each(function() {
        $(this).find('input[type=checkbox]:first').click(function() {
            $(this).parents('tr')
                .find("input[type=checkbox]:gt(0)")
                .attr("disabled", !$(this).is(":checked"));
        });
    })
    .find('input[type=checkbox]:gt(0)').attr("disabled", true);
});

Try it out: http://jsfiddle.net/qaKGk/10/