3

我的代码使用语义 UI 复选框模块。我有四个复选框。代码需要确定何时取消选中所有复选框。

复选框之一的 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选择器失败了。

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

4

2 回答 2

2

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

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

也是.size()不推荐使用的.length

if ($services.filter(":checked").length > 0) {
    $userData.removeClass('hidden');
}
else {
    $userData.addClass('hidden');
}
于 2013-11-15T04:09:22.663 回答
0

一种最简单的方法。

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

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

这工作正常。

于 2016-06-10T17:05:03.420 回答