为什么切换按钮(输入类型= "checkbox" )只工作 - 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"one_answers" off"（divs）时，它可以很好地工作 - 但是我想要一个开关而不是两个按钮：

<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

欢迎来到堆栈溢出。

您的第一个示例失败了：

$(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/