Como es que puedo controlar el comportamiento del switch?, me explico, en el siguiente código he puesto un alert confirm!, cuando hago click en el elemento, me pregunta si deseo cambiar de estado, si doy en aceptar quiero que el swtich haga el cambio y si no, quiero que se quede tal cual. se entiende?
agradezco, saludos.
function on_off(elemento){
var r = confirm("¿Desea Cambiar de Estado?");
if($(elemento).siblings('input').prop("checked")){
if (r == true) {
console.log("cambio de estado");
} else {
console.log("NO cambio de estado");
}
}else{
if (r == true) {
console.log("cambio de estado");
} else {
console.log("NO cambio de estado");
}
}
}
.switch {
position: relative;
display: inline-block;
width: 50px;
height: 24px;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 20px;
width: 20px;
left: 2px;
bottom: 2px;
background-color: white;
-webkit-transition: .3s;
transition: .3s;
}
input:checked + .slider {
background-color: #9B27AF;
}
input:focus + .slider {
box-shadow: 0 0 1px #9B27AF;
}
input:checked + .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
<label class="switch"><input type="checkbox" class="check" name="check" checked><span class="slider round" onclick="on_off(this)"></span></label>
<label class="switch"><input type="checkbox" class="check" name="check" checked><span class="slider round" onclick="on_off(this)"></span></label>
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>