为什么切换按钮（输入类型=“复选框”）只能工作 - 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); 

    }); 


}); 

当我使用单独的按钮“开”和“关”（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

以下是你可能要考虑一下的例子：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/