为什么切换按钮（输入类型=“复选框”）仅适用于 JQuery？

Question

当我使用这种方式时 - 它只工作一次，然后点击停止：

<label class="switch">
<input type="checkbox" class="switch5">
<div class="slider round"></div>
</label> 

   $('.switch5').on('click', function() {
          $( "#slider" ).slider( "option", "disabled", false );
          $( "#slider" ).slider( "option", "value", 100 );

    $(this).off('click');

    $(this).on('click', function() {
        $( "#slider" ).slider( "option", "disabled", true );
        $( "#slider" ).slider( "option", "value", 0 );

    });


});

当我为“on”和“off”（div）使用单独的按钮时，它可以完美运行 - 但我想要一个开关而不是两个按钮：

<div class="on-button">ON</div>
<div class="off-button">OFF</div>


$('.on-button').on('click', function() {
    $( "#slider" ).slider( "option", "disabled", false );
    $( "#slider" ).slider( "option", "value", 100 );
});
$('.off-button').on('click', function() {
    $( "#slider" ).slider( "option", "disabled", true );
    $( "#slider" ).slider( "option", "value", 0 );
});

Answer 1

欢迎来到 Stack Overflow。

您的第一个示例因以下原因而失败：

$(this).off('click');

.off() 方法会删除使用.on() 附加的事件处理程序。

所以在第一次点击之后，.off() 移除了绑定的回调；因此，没有为您的复选框元素上的click 事件分配回调函数。它只工作 1 次。

更新 1

以下是您可能需要考虑的示例：https://jsfiddle.net/Twisty/23L6hb63/

HTML

<label class="switch">
  <input type="checkbox" class="switch5">
  <div class="slider round"></div>
</label>

jQuery

$(function() {
  $(".slider").slider({
    min: 0,
    max: 1,
    range: "min",
    change: function(e, ui) {
      $(".switch5").val(ui.value)
      if (ui.value < 1) {
        $(".switch5").prop("checked", false);
      } else {
        $(".switch5").prop("checked", true);
      }
    }
  });
});

更新 2

基于我的困惑和你的新例子，我建议如下：

  $('.switch5').on('click', function() {
    if ($(this).is(":checked")) {
      $("#slider").slider("option", {
        disabled: false,
        value: 100
      });
    } else {
      $("#slider").slider("option", {
        disabled: true,
        value: 0
      });
    }
  });

工作示例：https://jsfiddle.net/Twisty/uz1noyt0/