使用jquery根据前两个的状态控制第三个复选框答案

【问题标题】：Control third check box based on the state of the first two using jquery使用jquery根据前两个的状态控制第三个复选框
【发布时间】：2012-11-02 15:35:40
【问题描述】：

我有三个复选框，如果选中其他两个中的一个和/或其中一个，则需要禁用第三个。我敢肯定有比我目前更简单的方法。它正在变成我认为是一团糟，我希望有更多 jquery 知识的人可以在这里发光。

这是我的简单 html 表单：

<html>
<head>
    <script type="text/javascript" src="jquery.js"></script>
    <script src="custom.js" type="text/javascript"></script>
</head>
<body>
        <input type="checkbox" class="class" id="1">First
        <input type="checkbox" class="class" id="2">Second
        <input type="checkbox" class="class" id="3">Third
    </body>
</html>

这是我在 jquery v1.4.2 中使用的 javascript

jQuery(document).ready(function() {
// watches the events of all checkboxes
$(":checkbox").click(function(){
if(
    // if both 1 and 2 are checked we don't want to enable Third until both are unchecked.
    (($('#1:checkbox').attr('checked'))&&($('#2:checkbox').attr('checked')))||
    ((($('#1:checkbox').attr('checked'))&&($('#2:checkbox').attr('checked')))&&($('#3:checkbox').attr('disabled')))||
    ((($('#1:checkbox').attr('checked'))||($('#2:checkbox').attr('checked')))&&($('#3:checkbox').attr('disabled')))
){
    // we don't want to do anything in the above events
} else if( 

    // handles the First check box
    (($('#1:checkbox').attr('checked'))||(!$('#1:checkbox').attr('checked')))||
    // handles the Second check box
    (($('#2:checkbox').attr('checked'))||(!$('#2:checkbox').attr('checked')))

){
// call the disableThird function
disableThird();
}
});

// handles enabling and disabling the Third checkbox
function disableThird(){
    var $checkbox = $('#3:checkbox');
    $checkbox.attr('disabled', !$checkbox.attr('disabled'));
};
});

出于某种原因，检查 #3 将禁用它的自身。我不明白为什么。

这可行，但其中一个要求是非程序员应该能够编辑和维护它。理想情况下，如果他可以在 html 中添加新的复选框并且它会起作用，那就太好了。这些类是定义的，据我所知无法更改。如果选择了上述任何一个复选框，则复选框列表中的最后一个复选框将被禁用。同样，如果选中最后一个复选框，它将禁用其上方的所有复选框。我什至还没有开始编写和测试那部分，因为这对于非程序员来说很快就变得太复杂了。我自己更像是一个 PHP 编码器而不是一个 js，更不用说 jquery 编码器了。任何帮助将不胜感激。

【问题讨论】：

标签： jquery checkbox

【解决方案1】：

好的，所以id 属性不能以数字开头。此外，添加<label> 标签是一个不错的选择，可以使与复选框相邻的文本可点击。

以下是我将如何更改您的 HTML：

<label><input type="checkbox" class="chkGroup" id="chk1">First</label>
<label><input type="checkbox" class="chkGroup" id="chk2">Second</label>
<label><input type="checkbox" class="chkGroup" id="chk3">Third</label>

这是 JavaScript 代码：

$('.chkGroup').bind('click', function(){
    if ($('#chk1:checked,#chk2:checked').length > 0) {
        $('#chk3').attr('disabled', 'disabled').removeAttr('checked');
        $('#chk3').parent('label').css({color: '#ccc'});
    } else {
        $('#chk3').removeAttr('disabled');
        $('#chk3').parent('label').css({color: '#000'});
    }
});

要检查是否检查了某些内容，您可以使用:checked selector。如果相邻的复选框被禁用，我还添加了一个 css() 调用以使标签变为灰色。

【讨论】：

【解决方案2】：

感谢您的快速回复。那是一些简洁的代码和我所追求的东西的类型。我知道 jquery 可以真正简化这一点，我让它变得更加困难。关于 id 不以数字开头的说法太真实了。感谢您的提醒。我没有真正添加标签或编辑 html 的选项，因为它是通过 CMS 生成的。我现在试图保持简单，只是在大图之外的一侧确定 js。我忘了提到该类在页面上的其他控件之间共享。我不感兴趣的控件。不错的代码！我接受了您提供的内容并进行了一些修改，效果很好。

这是我所拥有的：

$(":checkbox").click(function(){
    if ($('#chk1:checked,#chk2:checked').length > 0) {
        $('#chk3').attr('disabled', 'disabled').removeAttr('checked');
    } else {
        $('#chk3').removeAttr('disabled');
    }
});

在检查任一个或＃CHK1和＃CHK2时，在禁用＃CHK3方面的魅力。现在我只需要在启用并检查#chk3 时禁用#chk1 和#chk2。您介意添加该功能吗？

【讨论】：

继续更新您的问题，不要在答案中提供说明。