2

Soy nuevo manejando JavaScript y tengo una vista, que consiste en las salas disponibles según una fecha, la vista me muestra el nombre de la sala con sus respectivos horarios

introducir la descripción de la imagen aquí

Quisiera saber como puedo agrupar las checkbox de tal forma que si marco un check de la sala Chaira, se me desactiven los check de las otras salas. Muchas gracias por su ayuda.

5
  • Buena pregunta, aunque no le parezca a la primera. Estoy evaluando una posible solución. el 27 ene. 2020 a las 12:27
  • DavidE.LunaM. Muchas gracias. el 27 ene. 2020 a las 12:38
  • Lo más sencillo es usar un framework o librería que soporte programación reactiva; de tal modo que se pueda establecer una propiedad de acuerdo a un suceso esperado. Por ejemplo, en Vue tienes algo como: :disabled="someRoomChecked" que lo que hace es escuchar por cambios en la variable "someRoomChecked" para que cuando sea true, ese control se desactive.
    – gugadev
    el 27 ene. 2020 a las 12:47
  • Con jQuery, puedes hacer algo bien sencillo. Agrega una variable "global" que funcione como bandera (si alguna sala fue marcada) y un listener para todos que se encargue de actualizar dicha variable y de desactivar todos los checkboxes siempre y cuando no se haya hecho un nuevo click sobre el checkbox marcado (en ese caso se deberá deseleccionar primero).
    – gugadev
    el 27 ene. 2020 a las 12:49
  • cuál es el código que has estado trabajando? el 27 ene. 2020 a las 14:44

1 respuesta 1

1

Una forma de hacerlo podría ser esta:

Primero, identifica y agrupa los elementos para poder después seleccionarlos fácilmente. Por ejemplo, podrías poner a todos los checks una clase sala, y añadir un atributo data-sala con el nombre de su sala. Ejemplo:

<input class="sala" data-sala="chaira" type="checkbox"/> <!-- 06:00 - 06:59 -->
<input class="sala" data-sala="chaira" type="checkbox"/> <!-- 07:00 - 07:59 -->
...
<input class="sala" data-sala="chaira" type="checkbox"/> <!-- 21:00 - 21:59 -->
...
<input class="sala" data-sala="caqueta" type="checkbox"/> <!-- 06:00 - 06:59 -->
<input class="sala" data-sala="caqueta" type="checkbox"/> <!-- 07:00 - 07:59 -->
...
<input class="sala" data-sala="caqueta" type="checkbox"/> <!-- 21:00 - 21:59 -->
...

Ahora puedes añadir a todas las salas un listener, que cuando se marque un checkbox, desmarque el resto de las otras salas:

$(".sala").change(function() {
  if ($(this).is(":checked") {
    var estaSala = $(this).attr("data-sala");
    var checksEstaSala = $('input[data-sala="' + estaSala + '"]');
    $(".sala").not(checksEstaSala).prop("checked", false);
  }
});

¿Qué hace esto?

En la primera línea definimos un evento onchange para todos los checks (los que hemos puesto la clase sala previamente).

Ahora, a partir de la segunda línea, es lo que se va a ejecutar cada vez que el estado el check cambie (lo pongamos a marcado o desmarcado).

Como solo queremos que haga algo si se marca, ponemos la comprobación de .is(":checked");

Después sacamos el nombre de la sala del check que hemos hecho click, el nombre de la sala está en nuestro atributo data-sala.

Después, sacamos una lista con todos los checks de esa sala. Por ejemplo si hemos hecho click en un check de chaira, esto seleccionará todos los checks de chaira, pero ojo, no hacemos nada con ellos, simplemente los seleccionamos y lo guardamos en la variable checksEstaSala.

Por último seleccionamos todos los checks y quitamos los de esta sala con .not(). Así que nos quedan todos los checks menos los de la sala seleccionada. Por último los desmarcamos con .prop("checked", false);

1
  • 1
    Muchas gracias. el 27 ene. 2020 a las 20:42

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.