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

发布于 2024-12-10 14:40:30 字数 1925 浏览 0 评论 0原文

我仍然对 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");
      }    
}));

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

原文

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!

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

江心雾 2024-12-17 14:40:30

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/

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/

回复收藏 0 原文

瑶笙 2024-12-17 14:40:30

首先，您必须将所有标签“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>

first, you must change the name of all tag "blabla_cd[]" to "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>

回复收藏 0 原文

~没有更多了~