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

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

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/