0

tengo una serie de checkboxes, los cuales tengo que limitar su selección a solo tres de ellos.

El problema se me da cuando tengo un form, y dentro del mismo, otras etiquetas y dentro de esas etiquetas, tengo los checkboxes.

Por ejemplo:

<form id="choosen" action="">
     <div class="row">              
          <div class="col-xl-6 col-lg-6 col-md-12 col-sm-12">
               <div class="row mt-5 d-flex justify-content-around">
                    <label class="checkbox">
                          <input type="checkbox" onchange="validation('choosen', this)" />
                          <span class="btn image-1 boton-size-u btn-green text-uppercase">
                               <h5 class="impact shadow text-center pt-5 name">Name 1</h5>
                          </span>
                    </label>
                            
                    <label class="checkbox">
                          <input type="checkbox" onchange="validation('choosen', this)" />
                          <span class="btn image-2 boton-size-u btn-green text-uppercase">
                               <h5 class="impact shadow text-center pt-5 name">Name 2</h5>
                          </span>
                    </label>

                    <label class="checkbox">
                          <input type="checkbox" onchange="validation('choosen', this)" />
                          <span class="btn image-3 boton-size-u btn-green text-uppercase">
                                <h5 class="impact shadow text-center pt-5 name">Name 3</h5>
                          </span>
                    </label>                                
                </div>
            </div>
       </div>
  </form>

En este ejemplo, solo tengo 3 checkbox, pero hay más. La idea es que sean imágenes, y de hecho, son checkboxes modificados con css.

Luego, tengo el siguiente script:

function validation(choosen, obj) {
    limit = 3;
    cont = 0;
    if (obj.checked) {
        for (i = 0; ele = document.getElementById(choosen).children[i]; i++)
            if (ele.checked) cont++;
        if (cont > limit)
            obj.checked = false;
    }

    if (cont > limit){
        alert('Solo se pueden elegir 3 (tres) profesores!')
    }
}

La idea de ese script es que me limite la cantidad de checkboxes que se puedan seleccionar, y luego usar para mandar sus values (que todavía no está codificado) a locaStorage.

Pero antes de todo eso, tendría que arreglar esto, porque si tengo dentro del form todos los checkbox sin las demás etiquetas en el medio, el script funciona bien.

Espero se entienda. Gracias.

1 respuesta 1

3

Modifiqué un poco el js, cambié el límite a 2 para probarlo, faltaban varias llaves y no estabas seleccionando los inputs, ya que el único hijo de choosen era un div de clase "row":

function validation(choosen, obj) {
 let limit = 2;
 let cont = 0;
 let ele = document.querySelectorAll('input[type="checkbox"]');
 console.log(ele);
 if (obj.checked) {
    for (i = 0; i< ele.length; i++){
        if (ele[i].checked) {
          cont++;
          console.log(cont);
        }
     if (cont > limit){
        obj.checked = false;
        alert('Solo se pueden elegir 3 (tres) profesores!');
     }
   }
 }
}
1
  • Gracias. También lo pude solucionar poniendo `getElementByTagName('input'), en lugar de children. el 7 ago. 2020 a las 17:21

Tu Respuesta

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

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