如何使用每个循环 jquery 禁用所有未选中的复选框

Question

我尝试过查看其他各种解决方案，但似乎没有一个对我有用，所以我发布了这个。

我在 Wordpress 网站上有一个预订日历，允许用户在马场选择 1 小时的老虎机，并且根据他们的角色(他们必须登录才能使用它(小时数受到限制。例如，三个、四个或八个小时。我正在尝试做的是计算动态选中的复选框数量，然后，当它达到允许的限制时，它会禁用所有其他复选框，直到他们决定取消选中现有的选中复选框。

这是我的代码：

$('.booking_font_cuprum').click(function(){
var checked = $("input:checked").length;
if( checked >= <?php echo $allowed_hours ?>) {
$("input").each( function() {
if($(this).not(':checked')) {
$(this).attr('disabled', 'disabled');
}
});
} else {
console.log("keep checking...");
}
});

$allowed_hours已经在上面的 PHP 中根据用户角色进行了规定(并且它有效(。基本上发生的情况是每个复选框都被禁用，因此用户无法取消选中他们已经选择的内容。我以为使用:not选择器只会在未选中的情况下禁用，但也许我实现不正确？取消选中后，我还需要重新启用所有其他复选框，以允许用户更改其选择。

Answer 1

你需要使用$(this).is(':checked')和$(this).not(':checked')。disabled是一个属性，所以你应该使用prop()而不是attr()

if (!$(this).is(':checked')) {
$(this).prop('disabled', true);
}

下面是小型工作演示：

$(document).ready(function() {
$("input").each(function() {
if (!$(this).is(':checked')) {
$(this).prop('disabled', true);
}
});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='checkbox' checked />
<input type='checkbox' checked />
<input type='checkbox' />
<input type='checkbox' />
<input type='checkbox' checked />
<input type='checkbox' />

Answer 2

@Michael Emerson，

根据您的编码标准，我给出了以下工作代码。

我已经尝试了下面的代码并且工作正常。

$("input").each( function() {
if(!$(this).is(':checked')) {
$(this).attr('disabled', 'disabled');
}
});

你必须记住一件重要的事情，请采用单一的方法。通过设置"attr"或"prop"来使用。两者都可以正常工作。

但是，如果要将这两种方法用于具有各种方案的同一组控件，则设置启用/禁用值可能会发生冲突。