jQueryui上的两个复选框选中需要按钮激活和未选中禁用

jQuery ui two checkboxes on checked need button to activate and on unchecked disabled

本文关键字：激活 按钮 两个 jQueryui 复选框      更新时间：2024-03-10

首先访问我的小提琴

我使用的是这里设置的jQuery ui按钮。当两个check-boxes都选中时，我想要的是激活和移除类别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");    
  } 
});

使用$('.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");
  }
});

我还更改了attr的错误使用，以禁用具有prop的元素，这是适当的方式。

上述代码也可以更简洁地写成

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