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.