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

Question

I am using jQuery-ui button set here. What I want when both check-boxes are checked I need the buttons to be activate and removeClass disabledButton, and when not checked (both) I want the buttons to be disabled and addClass disabledButton. How can I do that?

Here is my jQuery approach:

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

Jon · Accepted Answer · 2013-12-04 10:16:22Z

2

Use $('.conditions').not(':checked').length to get the number of unchecked controls. If this number is 0 then both have been checked, so you know what to do.

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

I have also changed the incorrect use of attr to disable the elements with prop which is the appropriate way.

The above code can also be written more concisely as

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

answered Dec 4, 2013 at 10:16

Jon

439k85 gold badges756 silver badges820 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related