Tengo que realizar la siguiente tarea.

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.
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. Y si se quita al menos una selección y vuelven a quedar en menor que 3, se vuelvan a habilitar todos.

Hasta el momento, esto es lo que tengo:

En HTML:

    <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>


En JS:

    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!');
    		}
    	}
    }


En CSS:

    .checkbox input[type="checkbox"]:disabled ~ span {
      filter: grayscale(100%);
    }


Como son fotos de los profesores, la idea es que cada foto quede en blanco y negro.