如何查看是否使用 jQuery 检查了所有复选框

Question

我有 8 个复选框和 1 个 btn，我用这样的循环 JSTL 创建了

<c:forEach begin="1" end="8" varStatus="loop">
        <input type="checkbox" onchange = "x()" id="seat${loop.index}" name="seat${loop.index}" value="seat${loop.index}">
        <label for="seat${loop.index}">Seat${loop.index}</label>
</c:forEach>
<input type="submit" value="Save" name="savebtn">

我想检查是否选中了任何复选框，如果没有选中则按钮将被禁用

我知道如何检查复选框是否被选中，我知道如何禁用按钮。但是，我不知道如何使用循环来实现它，因为我以前没有使用过 JQUERY。这是我尝试做的。

<script>
function x() {
    for (var i = 1; i <= 8; i++){
        if ($(seat+i).prop('checked')){
            alert("+1")
        }
        else{
            alert("-1")
        }
    }
}
</script>

此代码仅检查我的第一个座位是否被选中，而忽略其余的。 P.S: 复选框必须用 JSTL 初始化

Answer 1

你可以简单地使用下面的 jQuery，基本上可以归结为有一个selector 来获取（全部）checked checkboxes：

$("input[type=checkbox]:checked").length === 0

如果您的表单中碰巧有其他复选框，请输入class：

<input type="checkbox" class="seat" ... />

$("input.seats[type=checkbox]:checked").length === 0

设置提交按钮的禁用状态可以使用：

$("input[type=submit]").prop("disabled", disabled);

disabled 是一个布尔值。

知道了这一点，您可以使用它来设置提交按钮的禁用状态，例如：

$("input[type=submit]").prop("disabled", $("input[type=checkbox]:checked").length === 0);

Answer 2

您的代码只检查第一个座位是否被选中，而忽略其余的，因为要检查所有复选框，您需要遍历所有复选框，而您在这里没有这样做。

var count = 0;
$($('input[type="checkbox"]')).click(function(){
  if($(this).prop('checked')){
    console.log("Checkbox is checked.");
    count++;
  }
  else{
    console.log("Checkbox " + index + " is not checked.");
    count--;
  }
);

//Disable button if no checkbox is checked.
if(count == 0){
  $('input[type="submit"]').prop('disabled', true);
}
else{
  $('input[type="submit"]').prop('disabled', false);
}
});

希望这会对你有所帮助。