Question

我仍然对jQuery选择器感到困惑。

我有这张桌子：

<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>

如果我选中左侧的复选框，则同一行中的另一个复选框启用，反之亦然我尝试使用这个脚本：

$(document).ready(function() {

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

我需要帮助来填充选择器！

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

尝试一下：http://jsfiddle.net/qaKGk/10/

Answer 2

首先，您必须将所有标签“blabla_cd []”的名称更改为“balbla_cd”

$(document).ready(function() {
    $("input[name=menu_cd]").live("click", function(){
        var o = $(this).parent().parent().children().find("input[name=rule_tp]");
        if ($(this).attr("checked") == "checked") {
            $.each(o, function(){
                $(this).removeAttr("disabled");
            });
        } else {
            $.each(o, function(){
                $(this).removeAttr("checked").attr("disabled", "disabled");
            });
        }
    });
 });


</head>
<body>
    <table border="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>

如果选中/取消选中一行中的另一个复选框，则禁用/启用复选框

2 个答案: