0

Dispongo de un toggle el cual quiero conservar su comportamiento, pero anulando la posibilidad del usuario de utilizarlo.

body, html {
  background: #454545;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100%;
  z-index: -1;
}
.btn {
  border: 1px solid #107a00;
  display: inline-block;
  padding: 5px;
  position: relative;
  text-align: center;
  transition: background 600ms ease, color 600ms ease;
}
input[type="radio"].toggle {
  display: none;
}
input[type="radio"].toggle + label {
  cursor: pointer;
  min-width: 100px;
}
input[type="radio"].toggle + label:hover {
  background: none;
  color: #107a00;
}
input[type="radio"].toggle + label {
  background: none;
  color: #fff;
}
input[type="radio"].toggle + label:after {
  background: #107a00;
  content: "";
  height: 100%;
  position: absolute;
  top: 0;
  transition: left 200ms cubic-bezier(0.77, 0, 0.175, 1);
  width: 100%;
  z-index: -1;
}
input[type="radio"].toggle.toggle-left + label {
  border-right: 0;
}
input[type="radio"].toggle.toggle-left + label:after {
  left: 100%;
}
input[type="radio"].toggle.toggle-right + label {
  margin-left: 1px;
}
input[type="radio"].toggle.toggle-right + label:after {
  left: -100%;
}
input[type="radio"].toggle:checked + label {
  cursor: default;
  color: #f5dd01;
  transition: color 200ms;
}
input[type="radio"].toggle:checked + label:after {
  left: 0;
}
<div>
  <input id="toggle-on" class="toggle toggle-left" name="toggle" value="false" type="radio" checked>
  <label for="toggle-on" class="btn">Cable</label>
  <input id="toggle-off" class="toggle toggle-right" name="toggle" value="true" type="radio">
  <label for="toggle-off" class="btn">WiFi</label>
</div>

He probado a añadir al div el estilo pointer-events: none; pero continua permitiendo que el usuario lo use.

¿Cómo puedo caparlo?

1 respuesta 1

1

Para poder desactivar estos elementos, he usado disabled, cosa que es sencilla de implementar en JS. Lo que no se como lograr, es el cambio de CSS para que el resto de botones no cambie de colores (en mi ejemplo, solo lo quite). Esa parte te la dejo a ti jaja

body, html {
  background: #454545;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100%;
  z-index: -1;
}
.btn {
  border: 1px solid #107a00;
  display: inline-block;
  padding: 5px;
  position: relative;
  text-align: center;
  transition: background 600ms ease, color 600ms ease;
}
input[type="radio"].toggle {
  display: none;
}
input[type="radio"].toggle + label {
  min-width: 100px;
}
input[type="radio"].toggle + label:hover {
  background: none;
}
input[type="radio"].toggle + label {
  background: none;
  color: #fff;
}
input[type="radio"].toggle + label:after {
  background: #107a00;
  content: "";
  height: 100%;
  position: absolute;
  top: 0;
  transition: left 200ms cubic-bezier(0.77, 0, 0.175, 1);
  width: 100%;
  z-index: -1;
}
input[type="radio"].toggle.toggle-left + label {
  border-right: 0;
}
input[type="radio"].toggle.toggle-left + label:after {
  left: 100%;
}
input[type="radio"].toggle.toggle-right + label {
  margin-left: 1px;
}
input[type="radio"].toggle.toggle-right + label:after {
  left: -100%;
}
input[type="radio"].toggle:checked + label {
  cursor: default;
  color: #f5dd01;
  transition: color 200ms;
}
input[type="radio"].toggle:checked + label:after {
  left: 0;
}
<input disabled id="toggle-on" class="toggle toggle-left" name="toggle" value="false" type="radio" checked>
<label disabled for="toggle-on" class="btn">Cable</label>
<input disabled id="toggle-off" class="toggle toggle-right" name="toggle" value="true" type="radio">
<label disabled for="toggle-off" class="btn">WiFi</label>

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.