爲什麼切換按鈕（輸入類型=「複選框」）只能工作 - 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/