Question

我有这段代码：

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<script type="text/javascript">

$(':checkbox').change(function(){
    var len = $(':checkbox:checked').length;

    $(':checkbox').not(':checked').prop('disabled', len >= 2)
});
</script>

</head>
<body>
<input type="checkbox" id="4" name="4[]" value="abc" style="width:10px">
<input type="checkbox" id="4" name="4[]" value="qwe" style="width:10px">
<input type="checkbox" id="4" name="4[]" value="xyz" style="width:10px">
<input type="checkbox" id="4" name="4[]" value="pqr" style="width:10px">
</body>
</html>

这是在这个JSfiddle中运行的：http://jsfiddle.net/ESH54/但我不能让它在localhost中运行。有什么想法吗？

Answer 1

您尝试访问此时不存在的元素。你必须等待dom准备好

<script type="text/javascript">
$(function() {
    $(':checkbox').change(function(){
        var len = $(':checkbox:checked').length;

        $(':checkbox').not(':checked').prop('disabled', len >= 2)
    });
});
</script>

另见：https://learn.jquery.com/using-jquery-core/document-ready/

你的jsfiddle工作，因为脚本包含在window.onload处理程序的头部内部（单击“Javascript”旁边的图标以查看配置/此详细信息）

Answer 2

您尝试将js代码移动到页面底部。它应该在html生成之后

<!DOCTYPE html>
<html>
<head>

</head>
<body>
<input type="checkbox" id="4" name="4[]" value="abc" style="width:10px">
<input type="checkbox" id="4" name="4[]" value="qwe" style="width:10px">
<input type="checkbox" id="4" name="4[]" value="xyz" style="width:10px">
<input type="checkbox" id="4" name="4[]" value="pqr" style="width:10px">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<script type="text/javascript">

$(':checkbox').change(function(){
    var len = $(':checkbox:checked').length;

    $(':checkbox').not(':checked').prop('disabled', len >= 2)
});
</script>

</body>
</html>

Jquery不在localhost上工作

2 个答案: