Question

我的代码使用的是semantic-ui复选框模块。我有四个复选框。代码需要确定何时取消选中所有chekbox。

其中一个复选框的Html：

<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)}
});

事实证明，semantic-ui实际上并没有设置相应checked元素的input属性。因此:checked选择器失败。

我的问题是如何做到这一点？

Answer 1

我认为问题是服务选择器（$services），你需要在.ui.checkbox元素中的input元素中

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

.size()也已弃用[{1}}

.length

Answer 2

最简单的方法。

让我们假设一个复选框用于启用或禁用文本字段。所以我们有：

# 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);
  }
});

这很好用。

Semantic-ui：确定是否选中复选框

2 个答案: