Skip to main content
Conviero el código en un snippet y hago la pregunta más fácil de entender.
Origen Enlace
user166844
user166844

Deshabilitar ¿Cómo deshabilitar listado de checkboxes cuando llego a una cantidad seleccionada JS?

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

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.

En CSS: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.

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

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.

Como son fotos de los profesores, la ideaLo que quiero hacer es que cada foto quede, una vez que selecciono 3 profesores en blancolos checkbox, los demás queden deshabilitados. Si se quita al menos una selección y negrovuelven a quedar en menor que 3, se vuelvan a habilitar todos.

Deshabilitar listado de checkboxes cuando llego a una cantidad seleccionada JS

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.

¿Cómo deshabilitar listado de checkboxes cuando llego a una cantidad seleccionada?

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.

Origen Enlace

Deshabilitar listado de checkboxes cuando llego a una cantidad seleccionada JS

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.