Semantic-ui: determine if checkbox is checked or not

Question

My code is using the semantic-ui checkbox module. I have four checkboxes. The code needs to determine when all the chekboxes are unchecked.

Html for one of the checkboxes:

<div class="inline field">
  <div class="ui toggle checkbox insurance">
    <input type="checkbox" name="insurance">
      <label>Would You Like To Reduce Your Monthly Insurance Costs</label>
  </div>
</div>

Javascript:

var $services = $('.service-selection').find('.ui.checkbox'),
    $userData = $('.user-data');

function updateElements(elem, show) {
    ...

    // show second segment only when atleast one service checkbox is checked
    if ($services.filter(":checked").size() > 0) {
        $userData.removeClass('hidden');
    }
    else {
        $userData.addClass('hidden');
    }

}

$services.checkbox({
    'onEnable': function() {updateElements(this, true)},
    'onDisable': function() {updateElements(this, false)}
});

Turns out that semantic-ui does not actually set the checked attribute of corresponding input element. So the :checked selector fails.

My question is how to do that?

Answer 1

I think the problem is the services selector($services), you need to in the input element within the .ui.checkbox element

var $services = $('.service-selection').find('.ui.checkbox input')

also .size() is deprecated use .length

if ($services.filter(":checked").length > 0) {
    $userData.removeClass('hidden');
}
else {
    $userData.addClass('hidden');
}

Answer 2

A simplest way for do it.

Let us imagine that a checkbox is used to enable or disable a text field. So we have:

# Using CoffeeScript:
$("#signature_credit_with_coupon").on "change", ->
  if (@checked)
    $('#signature_coupon').attr 'disabled', false
    $('#signature_coupon').focus()
  else
    $('#signature_coupon').attr 'disabled', true
  return

# Using JavaScript with jQuery:
$("#signature_credit_with_coupon").on("change", function() {
  if (this.checked) {
    $('#signature_coupon').attr('disabled', false);
    $('#signature_coupon').focus();
  } else {
    $('#signature_coupon').attr('disabled', true);
  }
});

This works fine.