jquery - 根据复选框添加/删除类

Question

我有一个可以工作的小表格。有 2 个选项，A 和 B。

如果A和B为NO则禁用该按钮。如果 A 或 B 为 YES，则从按钮中删除 disable 类。这就是我的目标，这就是我所拥有的:

$('.check-opt').change(function () {
  if ($('input[name="step_2"],[name="step_4"]:checked').val() == "yes") {
    $('#order_btn_id').removeClass('disabled');
  } else {
    $('#order_btn_id').addClass('disabled');
  }
});

它的作用是在选择 A 或 B 时删除禁用的类，但是当您同时选择 A 和B 为 NO 那么禁用的类不会添加回来。我哪里出错了？

非常感谢!

Answer 1

您的逻辑问题是您正在对元素集合调用 val() ，因此它只会读取第一个元素的值。

实现您所需的最简单方法是使用 toggleClass() 以及 bool 值来确定是否应添加或删除该类。您可以根据两个复选框是否都未选中来设置该 bool 值的状态，如下所示:

$('.check-opt').change(function() {
  var disabled = !$('input[name="step_2"]').prop('checked') && !$('input[name="step_4"]').prop('checked');
  $('#order_btn_id').toggleClass('disabled', disabled);
});

.disabled {
  background-color: #CCC;
  color: #666;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" name="step_2" class="check-opt" />
<input type="checkbox" name="step_4" class="check-opt" />
<button id="order_btn_id" class="disabled">Order</button>

这可能会被简化为检查是否检查了任何 .check-opt 元素，但这取决于 DOM 中有多少组复选框:

var disabled = $('.check-opt:checked').length == 0;

另请注意，如果您想完全禁用该按钮，则值得设置 prop('disabled', true) 并向其添加类。