Semantic-ui：复选框onDisable函数无法调用

Question

我的代码使用的是semantic-ui复选框模块。我有一个复选框。我需要在复选框状态改变后调用一个函数。就像jQuery复选框更改功能一样。但是当我使用semantic-ui复选框时，我就无法调用“onDisable”＆＃39;功能。在改变之前我总是得到复选框的状态。但我只想在更改后获得复选框状态。

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

可以看到使用semantic-ui复选框here。

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

onChange!true
onEnable!true

我只想要

onChange!false
onEnable!false

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

onChange!false
onEnable!false

我只想要

onChange!true
onEnable!true

事实证明，semantic-ui复选框回调函数并不符合我的需要。

我的问题是：

1.为什么“onDisable＆＃39;功能是不是被称为？

2.如何使用semantic-ui复选框，如jQuery checkbox onchange function？

Answer 1

我在选择器方面遇到了同样的问题。语义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"));
  }
});

Answer 2

1 / onDisable和onEnable回调用于禁用/启用复选框，而不是选中/取消选中（有针对它们的onChecked和onUnchecked回调），请参阅设置已启用和设置已禁用< / strong> behaviors，与输入已禁用属性相关。

2 / documentation表示回调的 context （= this）是HTML输入元素，然后你可以这样使用它。

＆＃13;

＆＃13;

$(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');
  });


});

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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