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.