Question

我有一个可以工作的小表格。 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作为{{1 }}，然后再不添加禁用的类。我哪里出错了？

非常感谢！

Answer 1

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

最简单的方法是使用toggleClass()和一个布尔值来确定是否应添加或删除该类。您可以根据是否选中两个复选框来设置该布尔值的状态，如下所示：

$('.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)并为其添加类。

Answer 2

使用两个选择器进行查询：

var a = $('input[name="step_2"]:checked').val() == "yes";
var b = $('[name="step_4"]:checked').val() == "yes";

$('#order_btn_id').toggleClass('disabled', a || b)

根据复选框添加/删除课程

2 个答案: