javascript - jQuery ui 两个复选框，选中需要按钮激活，未选中禁用

Question

Visit my fiddle first

我在这里使用 jQuery-ui 按钮集。当两个 check-boxes 都被选中时，我想要什么，我需要激活按钮并删除Class disabledButton，当没有选中(两个)时，我希望按钮被禁用并且添加类disabledButton。我怎样才能做到这一点？

这是我的 jQuery 方法:

$(".conditionCheck").buttonset();    
$(".conditions").click(function () {    
  if ($(".conditions").is(':checked')) {   
    $(".paymentButton").removeAttr("disabled")
      .removeClass("disabledButton");   
  }    
  if (!$(".conditions").is(':checked')) {   
    $(".paymentButton").attr("disabled")
      .addClass("disabledButton");    
  } 
});

Answer 1

使用$('.conditions').not(':checked').length获取未选中控件的数量。如果这个数字是 0，那么两者都已被检查，所以您知道该怎么做。

$(".conditions").click(function () {
  if ($('.conditions').not(':checked').length) {
    $(".paymentButton").prop("disabled", true).addClass("disabledButton");
  }
  else {
    $(".paymentButton").prop("disabled", false).removeClass("disabledButton");
  }
});

我还更改了 incorrect use of attr使用 prop 禁用元素，这是正确的方法。

上面的代码还可以写得更简洁为

var allChecked = $('.conditions').not(':checked').length == 0;
$(".paymentButton").prop("disabled", !allChecked)
                   .toggleClass("disabledButton", !allChecked);