复选框和 JQuery 在 Opera 和 IE 中的行为异常答案

【问题标题】：Checkboxes and JQuery behaving strangely in Opera and IE复选框和 JQuery 在 Opera 和 IE 中的行为异常
【发布时间】：2012-02-04 17:55:27
【问题描述】：

示例代码使用 JQuery 来防止用户取消选中最后一个选中的复选框。它在 Firefox 和 Chrome 中按预期工作，但在 Opera 或 IE 中不正常。

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
        #checkboxContainer label {
            float: left;
            clear: right;
        }
        #checkboxContainer input {
            float: left;
            clear: left;
        }
    </style>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $("#checkboxContainer input[type='checkbox']").change(function(evt) {
                if ($("#checkboxContainer input[type='checkbox']:checked").length == 0) {
                    console.log("Only 1 checkbox; can't uncheck.");
                    $(evt.target).attr("checked", "checked");
                }
            });
        });
    </script>
</head>
<body>
    <div id="checkboxContainer">
        <input type="checkbox" id="checkbox1" checked="checked"/>
        <label for="checkbox1">1</label>
        <input type="checkbox" id="checkbox2"/>
        <label for="checkbox2">2</label>
    </div>
</body>
</html>

这是怎么回事？

【问题讨论】：

标签： javascript jquery html events checkbox

【解决方案1】：

如果您将选择器更改为“:checkbox”而不是“input[type='checkbox']”，这似乎在 IE 和 Opera 中有效。 jQuery 文档声明两者是等价的，所以我不确定如何解释行为上的差异。

<script type="text/javascript">
    $(document).ready(function() {
        $("#checkboxContainer :checkbox").change(function(evt) {
            if ($("#checkboxContainer :checkbox:checked").length == 0) {
                console.log("Only 1 checkbox; can't uncheck.");
                $(evt.target).attr("checked", "checked");
            }
        });
    });
</script>

【讨论】：

谢谢马特，这似乎可行，但我对解释比解决方法更感兴趣。
一个有趣的注释...我添加了一个 div 并开始将计数写入其中，仅用于调试目的，并添加它会使您的原始选择器工作。然后我删除了对计数的引用，只是将一些静态文本设置到我上面代码中“if”之前的行中的 div 中：$('#debugDiv').text('static test')，它也修复了问题。仍然不是解释 - 似乎 DOM 可能需要更改才能使用该选择器正确计算计数。
非常感谢您进一步调查...这可能是一个 JQuery 错误。我完全糊涂了，因为这是一个非常基本的功能。

【解决方案2】：

你可以这样没有错误：

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
        #checkboxContainer label {
            float: left;
            clear: right;
        }
        #checkboxContainer input {
            float: left;
            clear: left;
        }
    </style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
        $(document).ready(function() {
            $(".ceks").click(function() {
                if( !$(".ceks:checked").length ){
                    $(this).attr("checked", "checked");
                }
            });
        });
    </script>
</head>
<body>
    <div id="checkboxContainer">
        <input type="checkbox" class="ceks" checked="checked"/>
        <label for="checkbox1">1</label>
        <input type="checkbox" class="ceks"/>
        <label for="checkbox2">2</label>
    </div>
</body>
</html>

【讨论】：

是的。似乎 $(".checkboxContainer input[type='checkbox']:checked") 有问题，但 input:checkbox:checked 有效。