Warum Schalter (Eingangstyp = "Checkbox") funktioniert nur Einsen - JQuery?

Question

Wenn ich auf diese Weise - es funktioniert nur einmal und dann nach dem Klicken Stopps:

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

    }); 


}); 

Als ich separate Tasten für ‚Ein‘ und ‚Aus‘ (divs) verwenden es perfekt funktioniert dann - aber ich würde wie ein Schalter anstelle von zwei Tasten:

<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

Willkommen bei Stack Overflow.

Ihr erstes Beispiel schlägt fehl, weil:

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

Die .off() Methode Ereignishandler entfernt, die mit .on() befestigt waren.

Also nach dem ersten Klick entfernt die .off() den gebundenen Rückruf; Daher ist dem Ereignis click auf Ihrem Kontrollkästchenelement keine Rückruffunktion zugewiesen. Es funktioniert nur das 1 Mal.

Update 1

Hier ist ein Beispiel dafür, was Sie vielleicht zu berücksichtigen: 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); 
     } 
    } 
    }); 
}); 

Update 2

Aufgrund meiner Verwirrung und Ihr neues Beispiel, würde ich vorschlagen, die folgende:

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

Arbeitsbeispiel: https://jsfiddle.net/Twisty/uz1noyt0/