3

Tengo un cierto número de checkbox para seleccionar profesores para recibir clases online.

Lo que quiero hacer es recibir un key y un value a localStorage de los profesores, pero tengo que limitar la cantidad a solo 3 de ellos, es decir, solo se pueden elegir 3, y si quisieras elegir otro, deberías quitar la selección de uno u otro en el checkbox seleccionado.

Lo que pude hacer hasta el momento es limitar con JS la cantidad de checkbox que se pueden seleccionar a 3, y al querer seleccionar un 4to checkbox, genera un alert de que no se pueden seleccionar más.

window.localStorage.clear()

function validation(choosen, obj) {
  limit = 3;
  cont = 0;
  if (obj.checked) {


    for (i = 0; ele = document.getElementById('choosen').getElementsByTagName('input')[i]; i++){

      if (ele.checked){
        cont++;
      }
    }

    for (i = 0; i < localStorage.length; i++){
      var key = localStorage.key(i);
      document.getElementById(key).checked = true;
    }

    if (cont > limit){
      obj.checked = false;
      alert('Solo se pueden elegir 3 (tres) profesores!');
    }
  }
}
.checkbox input[type="checkbox"]:disabled ~ span {
  filter: grayscale(100%);
}
<form id="choosen" method="get" name="disabling" action="">
  <div class="row" id="child">
    <div class="col-xl-6 col-lg-6 col-md-12 col-sm-12">
      <div class="d-flex justify-content-center tsize mt-5">
        TITULO DE LAS CLASES
      </div>
      <div class="row mt-2 d-flex justify-content-around">
        <label class="checkbox">
          <input type="checkbox" id="profe-01" value="nombre del profesor 1" name="disable" onchange="validation('choosen', this)" onclick="if(this.checked)localStorage.setItem(this.id,this.value);else localStorage.removeItem(this.id);" />
          <span class="btn profesor boton-size-u btn-green text-uppercase">
            <h5 class="impact shadow text-center pt-5 name">
              <i class="fas fa-check-circle"></i>
            </h5>
          </span>
          <h5 class="impact text-center name">
            TIPO<br>Nombre del profesor
          </h5>
        </label>

        <label class="checkbox">
          <input type="checkbox" id="profe-02" value="nombre del profesor 2" name="disable" onchange="validation('choosen', this)" onclick="if(this.checked)localStorage.setItem(this.id,this.value);else localStorage.removeItem(this.id);" />
          <span class="btn profesor boton-size-u btn-green text-uppercase">
            <h5 class="impact shadow text-center pt-5 name">
              <i class="fas fa-check-circle"></i>
            </h5>
          </span>
          <h5 class="impact text-center name">
            TIPO<br>Nombre del profesor
          </h5>
        </label>        

        <label class="checkbox">
          <input type="checkbox" id="profe-03" value="nombre del profesor 3" name="disable" onchange="validation('choosen', this)" onclick="if(this.checked)localStorage.setItem(this.id,this.value);else localStorage.removeItem(this.id);" />
          <span class="btn profesor boton-size-u btn-green text-uppercase">
            <h5 class="impact shadow text-center pt-5 name">
              <i class="fas fa-check-circle"></i>
            </h5>
          </span>
          <h5 class="impact text-center name">
            TIPO<br>Nombre del profesor
          </h5>
        </label>
      </div>

      <div class="row mt-2 d-flex justify-content-around">
        <label class="checkbox">
          <input type="checkbox" id="profe-04" value="nombre del profesor 4" name="disable" onchange="validation('choosen', this)" onclick="if(this.checked)localStorage.setItem(this.id,this.value);else localStorage.removeItem(this.id);" />
          <span class="btn profesor boton-size-u btn-green text-uppercase">
            <h5 class="impact shadow text-center pt-5 name">
              <i class="fas fa-check-circle"></i>
            </h5>
          </span>
          <h5 class="impact text-center name">
            TIPO<br>Nombre del profesor
          </h5>
        </label>

        <label class="checkbox">
          <input type="checkbox" id="profe-05" value="nombre del profesor 5" name="disable" onchange="validation('choosen', this)" onclick="if(this.checked)localStorage.setItem(this.id,this.value);else localStorage.removeItem(this.id);" />
          <span class="btn profesor boton-size-u btn-green text-uppercase">
            <h5 class="impact shadow text-center pt-5 name">
              <i class="fas fa-check-circle"></i>
            </h5>
          </span>
          <h5 class="impact text-center name">
            TIPO<br>Nombre del profesor
          </h5>
        </label>        

        <label class="checkbox">
          <input type="checkbox" id="profe-06" value="nombre del profesor 6" name="disable" onchange="validation('choosen', this)" onclick="if(this.checked)localStorage.setItem(this.id,this.value);else localStorage.removeItem(this.id);" />
          <span class="btn profesor boton-size-u btn-green text-uppercase">
            <h5 class="impact shadow text-center pt-5 name">
              <i class="fas fa-check-circle"></i>
            </h5>
          </span>
          <h5 class="impact text-center name">
            TIPO<br>Nombre del profesor
          </h5>
        </label>
      </div>
    </div>
  </div>
</form>

El problema es que en localStorage, ese 4to elemento, lo ingresa y me quedan 4 elementos, y no 3 como debería ser.

Lo que quiero hacer es que, una vez que selecciono 3 profesores en los checkbox, los demás queden deshabilitados. Si se quita al menos una selección y vuelven a quedar en menor que 3, se vuelvan a habilitar todos.

1 respuesta 1

2

Estás definiendo dos acciones, onchange para "validar" y onclick para guardar en localStorage, saltando la validación.

Lo ideal es no agregar los eventos directamente en la etiqueta HTML y, de hecho, usar solo uno para realizar la validación y guardar en localStorage. La idea es que se puedan marcar los elementos y, al llegar al límite permitido, deshabilitar los que no se han marcado para que no puedan agregarse.

  • Para poder procesar el formulario y se incluyan todos los seleccionados, es necesario agregar corchetes, es decir: name="disable[]"
  • Cuando se haya cargado el DOM, obtienes todos los checkbox por nombre
  • Recorres los elementos para asignar evento onchange, llamando a la función validation
  • En la función obtienes los elementos marcados
  • Recorres todos los elementos para saber qué hacer con cada uno:
    • Si está marcado o no se ha llegado al límite: Habilitar
    • Si está marcado: Agregar a seleccionados
    • Si ya se llegó al límite y no está marcado: Deshabilitar
  • Al terminar el ciclo guardas los seleccionados en localStorage

// Ejecutar hasta que se haya cargado el DOM
document.addEventListener('DOMContentLoaded', function () {
    // window.localStorage.clear(); // Descomenta esta línea
    
    // Máximo de profesores que se pueden seleccionar
    let max = 3;

    // Obtener todos los checkboxes por nombre
    let checks = document.querySelectorAll('[name="disable[]"]');
    // Recorrer para asignar evento cuando cambien
    checks.forEach(chk => chk.addEventListener('change', validation));

    // Validar
    function validation() {
        // Guardar profesores seleccionados en un arreglo
        let profes = [];
        // Obtener solo los que están marcados
        let checked = document.querySelectorAll(':checked');
        // Recorrer todos
        checks.forEach(chk => {
            // Si está marcado o no se ha llegado al límite
            if(chk.checked || checked.length < max) {
                // Quitar clase a etiqueta
                chk.closest('label').classList.remove('disabled');
                // Habilitar checkbox para permitir cambios
                chk.disabled = false;
                // Si está marcado, agregar a seleccionados
                if(chk.checked) {
                    profes.push(chk.id);
                }
            } else {
                // No está marcado y ya se llegó al límite
                // Agregar clase a etiqueta para saber que no se puede seleccionar
                chk.closest('label').classList.add('disabled');
                // Deshabilitar ckeckbox
                chk.disabled = true;
            }
        });
        // Guardar en localStorage
        // localStorage.setItem("profes", JSON.stringify(profes)); // Descomenta esta línea
    }
});
label { display:block; }
h5 { display:inline-block; }
.disabled { background:#ccc; }
<form id="choosen" method="get" name="disabling" action="">
    <div class="row" id="child">
        <div class="col-xl-6 col-lg-6 col-md-12 col-sm-12">
            <div class="d-flex justify-content-center tsize mt-5">
                TITULO DE LAS CLASES
            </div>
            <div class="row mt-2 d-flex justify-content-around">
                <label class="checkbox">
                    <input type="checkbox" id="profe-01" value="nombre del profesor 1" name="disable[]">
                    <span class="btn profesor boton-size-u btn-green text-uppercase">
                        <h5 class="impact shadow text-center pt-5 name">
                            <i class="fas fa-check-circle"></i>
                        </h5>
                    </span>
                    <h5 class="impact text-center name">
                        TIPO<br>Nombre del profesor
                    </h5>
                </label>
                            
                <label class="checkbox">
                    <input type="checkbox" id="profe-02" value="nombre del profesor 2" name="disable[]">
                    <span class="btn profesor boton-size-u btn-green text-uppercase">
                        <h5 class="impact shadow text-center pt-5 name">
                            <i class="fas fa-check-circle"></i>
                        </h5>
                    </span>
                    <h5 class="impact text-center name">
                        TIPO<br>Nombre del profesor
                    </h5>
                </label>        

                <label class="checkbox">
                    <input type="checkbox" id="profe-03" value="nombre del profesor 3" name="disable[]">
                    <span class="btn profesor boton-size-u btn-green text-uppercase">
                        <h5 class="impact shadow text-center pt-5 name">
                            <i class="fas fa-check-circle"></i>
                        </h5>
                    </span>
                    <h5 class="impact text-center name">
                        TIPO<br>Nombre del profesor
                    </h5>
                </label>
            </div>

            <div class="row mt-2 d-flex justify-content-around">
                <label class="checkbox">
                    <input type="checkbox" id="profe-04" value="nombre del profesor 4" name="disable[]">
                    <span class="btn profesor boton-size-u btn-green text-uppercase">
                        <h5 class="impact shadow text-center pt-5 name">
                            <i class="fas fa-check-circle"></i>
                        </h5>
                    </span>
                    <h5 class="impact text-center name">
                        TIPO<br>Nombre del profesor
                    </h5>
                </label>
                            
                <label class="checkbox">
                    <input type="checkbox" id="profe-05" value="nombre del profesor 5" name="disable[]">
                    <span class="btn profesor boton-size-u btn-green text-uppercase">
                        <h5 class="impact shadow text-center pt-5 name">
                            <i class="fas fa-check-circle"></i>
                        </h5>
                    </span>
                    <h5 class="impact text-center name">
                        TIPO<br>Nombre del profesor
                    </h5>
                </label>        

                <label class="checkbox">
                    <input type="checkbox" id="profe-06" value="nombre del profesor 6" name="disable[]">
                    <span class="btn profesor boton-size-u btn-green text-uppercase">
                        <h5 class="impact shadow text-center pt-5 name">
                            <i class="fas fa-check-circle"></i>
                        </h5>
                    </span>
                    <h5 class="impact text-center name">
                        TIPO<br>Nombre del profesor
                    </h5>
                </label>
            </div>
        </div>
    </div>
</form>

Cuando necesites acceder a los profesores seleccionados:

let guardados = JSON.parse(localStorage.getItem("profes"));

Nota: Para poder probar aquí, es necesario comentar las líneas que acceden a localStorage, quita los comentarios para hacerlo funcionar en tu proyecto:

// ***** Esto:
// window.localStorage.clear(); // Descomenta esta línea

// ***** Debería quedar así:
window.localStorage.clear();
1
  • Excelente, gracias por el gran aporte. La solución es impecable. Commented el 10 ago. 2020 a las 18:07

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.