0

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>

2 respuestas 2

2

Para lograr lo que deseas hacer basta con enviar como segundo parámetro a la función el evento (event) y luego utilizar el método preventDefault(); el cual deshabilita los comportamientos por defecto de un elemento, dejando así el estado actual del input.

function on_off(elemento, e){
var r = confirm("¿Desea Cambiar de Estado?");
if($(elemento).siblings('input').prop("checked")){
      if (!r) {
         e.preventDefault();
      }
   }else{
      if (!r) {
         e.preventDefault();
      }
   }
 }
.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, event)"></span></label>

<label class="switch"><input type="checkbox" class="check" name="check" checked><span class="slider round" onclick="on_off(this, event)"></span></label>

<script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>

1
  • 1
    agradecido por tu respuesta, saludos.
    – Rafa
    Commented el 8 nov. 2018 a las 15:30
2

En tu caso sería usar el método prop() que recibe dos parámetros, el primero sería la propiedad que quieres cambiar del elemento y el segundo sería el valor a cambias de la propiedad.

function on_off(elemento){
var r = confirm("¿Desea Cambiar de Estado?");
if($(elemento).siblings('input').prop("checked")){
      var checked = $(elemento).siblings('input').prop("checked")
      if (r == true) {
          console.log("cambio de estado");
      } else {
          console.log("NO cambio de estado");
          $(elemento).siblings('input').prop('checked', !checked);
      }
   }else{
    var checked = $(elemento).siblings('input').prop("checked")
      if (r == true) {
          console.log("cambio de estado");
      } else {
          console.log("NO cambio de estado");
          $(elemento).siblings('input').prop('checked', !checked);
      }
   }
 }
.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>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.