1

我的代码使用语义 UI 复选框模块。我有一个复选框。复选框状态更改后，我需要调用一个函数。就像 jQuery 复选框更改功能一样。但是当我使用语义用户界面复选框时，我无法调用“onDisable”函数。而且我总是在它改变之前得到复选框的状态。但我只想在它改变后获得复选框状态。

HTML 代码

<div class="ui checkbox">
    <input type="checkbox" name="high" > <label>High</label>
</div>

Javascript：

    var $checkbox = $(".ui.checkbox input");

    $checkbox.checkbox({
        onEnable: function() {
            console.log("onEnable!" + $checkbox.prop("checked"));
        },
        onDisable: function() {
            console.log("onDisable!" + $checkbox.prop("checked"));
        },
        onChange: function() {
            console.log("onChange!" + $checkbox.prop("checked"));
        }
    });

语义用户界面复选框的用法可以在这里看到。

当我单击复选框（选中复选框状态）时，它始终显示

onChange!true
onEnable!true

我只是想

onChange!false
onEnable!false

当我单击复选框（复选框状态未选中）时，它始终显示

onChange!false
onEnable!false

而我只想

onChange!true
onEnable!true

结果是语义 UI 复选框回调函数与我需要的不匹配。

我的问题是：

1.为什么不调用'onDisable'函数？

2.如何使用semantic-ui checkbox，如jQuery checkbox onchange函数？

4

2 回答 2

0

我在选择器上遇到了同样的问题。语义 UI 的复选框适用于包含的 div，而不是输入。以下不是最佳的，但有效

var $cont = $(".ui.checkbox");
var $checkbox = $(".ui.checkbox input");
$cont.checkbox({
  onEnable: function() {
    console.log("onEnable!" + $checkbox.prop("checked"));
  },
  onDisable: function() {
    console.log("onDisable!" + $checkbox.prop("checked"));
  },
  onChange: function(x) {
    console.log("onChange!" + $checkbox.prop("checked"));
  }
});
于 2015-01-28T17:21:36.890 回答
0

1/ onDisable 和 onEnable 回调用于禁用/启用复选框，而不是选中/取消选中（它们有 onChecked 和 onUnchecked 回调），参见设置启用和设置禁用 行为，与输入禁用属性相关。

2/文档说回调的上下文（= this）是 HTML 输入元素，那么你可以这样使用它。

$(function() {

  var $checkbox = $(".ui.checkbox");

  $checkbox.checkbox({
    onEnable: function() {
      console.log("onEnable!" + $(this).prop("checked"));
    },
    onDisable: function() {
      console.log("onDisable!" + $(this).prop("checked"));
    },
    onChange: function() {
      console.log("onChange!" + $(this).prop("checked"));
    }
  });

  $('#disable').click(function() {
    $checkbox.checkbox('set disabled');
  });

  $('#enable').click(function() {
    $checkbox.checkbox('set enabled');
  });


});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://raw.githubusercontent.com/Semantic-Org/Semantic-UI/master/dist/semantic.css" rel="stylesheet" />
<script src="https://raw.githubusercontent.com/Semantic-Org/Semantic-UI/master/dist/semantic.js"></script>

<div class="ui checkbox">
  <input type="checkbox" name="high">
  <label>High</label>
</div>

<a href="javascript:void(0)" id="disable">disable</a>
<a href="javascript:void(0)" id="enable">enable</a>

顺便说一句，onEnable 和 onDisable 回调似乎没有按预期触发。jsfiddle 版本：https ://jsfiddle.net/gtgco92h/

于 2016-02-15T13:53:02.783 回答