Question

示例代码使用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>

这里发生了什么？

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

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

Checkbox和JQuery在Opera和IE中表现得很奇怪

2 个答案: