javascript - 基于复选框启用和禁用的按钮是否被选中

Question

当未选中任何复选框时，我遇到了一个问题，然后按钮将不会被禁用，它仍然处于启用状态。

我还将属性放在禁用的按钮上，但它仍然处于启用状态；

这是我的代码

<input class="form-check-input tab1_chk" type="checkbox" name="2[]"  value="1">Option 1

<input class="form-check-input tab1_chk" type="checkbox" name="2[]"  value="2">Option 2

<input class="form-check-input tab1_chk" type="checkbox" name="2[]"  value="2">Option 3
<br>
<br>
<button type='button' class='tab1_btn' name="next" id="next">              
    Next       
</button>

if ($(".tab1_chk:checked" )) {
  $('.tab1_btn').prop('disabled', false);
} else {
  $('.tab1_btn').prop('disabled', true);
}

当我在此之前发出警报时$('.tab1_btn').prop('disabled', false);

然后警报在运行时显示，但在此之前发出警报 2$('.tab1_btn').prop('disabled', true);然后警报不显示，只显示第一个警报

JSFiddle

我需要当没有选中任何复选框时，下一个按钮将被禁用

标签： javascriptjqueryhtml

Answer 1

您需要应用事件处理程序

$('.tab1_btn').prop('disabled', !$('.tab1_chk:checked').length);//initially disable/enable button based on checked length
$('input[type=checkbox]').click(function() {
    if ($('.tab1_chk:checkbox:checked').length > 0) {
        $('.tab1_btn').prop('disabled', false);
    } else {
        $('.tab1_btn').prop('disabled', true);
    }
});

工作片段：- https://jsfiddle.net/bmpp663q/