1

tengo distintos checkbox y lo que necesito es que al activar el de facial completo, se desactive el cuadrante superior, cuadrante inferior, cuello y papada, y papada. Alguna sugerincia??

                  <li class="list-group-item listmodifica">
                    Cuadrante superior
                    <label for="CuadranteSuperior" class="switch2">
                       <input id="CuadranteSuperior" name="opciones" type="checkbox" class="warning" value="Cuadrante Superior">
                       <span class="slider5 round"></span>
                    </label>
                  </li>

                  <li class="list-group-item listmodifica">
                    Cuadrante inferior
                    <label for="CuadranteInferior" class="switch2">
                       <input id="CuadranteInferior" name="opciones" type="checkbox" class="warning" value="Cuadrante Inferior">
                       <span class="slider5 round"></span>
                    </label>
                  </li>

                  <li class="list-group-item listmodifica">
                    Cuello y papada
                    <label for="CuelloPapada" class="switch2">
                       <input id="CuelloPapada" name="opciones" type="checkbox" class="warning" value="Cuello y papada">
                       <span class="slider5 round"></span>
                    </label>
                  </li>

                  <li class="list-group-item listmodifica">
                    Escote
                    <label for="Escote" class="switch2">
                       <input id="Escote" name="opciones" type="checkbox" class="warning" value="Escote">
                       <span class="slider5 round"></span>
                    </label>
                  </li>

                  <li class="list-group-item listmodifica">
                    Facial completo
                    <label for="Facialcompleto" class="switch2">
                       <input id="Facialcompleto" name="opciones" type="checkbox" class="warning" value="Facial completo">
                       <span class="slider5 round"></span>
                    </label>
                  </li>

                  <li class="list-group-item listmodifica">
                    Papada
                    <label for="Papada" class="switch2">
                       <input id="Papada" name="opciones" type="checkbox" class="warning" value="Papada">
                       <span class="slider5 round"></span>
                    </label>
                  </li>

                  <li class="list-group-item listmodifica">
                    Cuello
                    <label for="Cuello" class="switch2">
                       <input id="Cuello" name="opciones" type="checkbox" class="warning" value="Cuello">
                       <span class="slider5 round"></span>
                    </label>
                  </li>
4
  • ¿Qué es lo que llevas intentado? Teniendo un punto de partida siempre es más sencillo ayudarte y así podemos esclarecer tus dudas.
    – phpMyGuel
    Commented el 8 ago. 2019 a las 10:48
  • Hola @phpMyGuel de momento no probe nada por que no se como hacerlo, si con javascript o de algún otro modo
    – Miguel
    Commented el 8 ago. 2019 a las 10:50
  • Interacciones por parte del usuario en entorno Web, siempre Javascript (o a través de su librería JQuery). Te aconsejo que mires el funcionamiento de los eventos change que puedes asociar a un <input>.
    – phpMyGuel
    Commented el 8 ago. 2019 a las 10:52
  • Los evento change ya los estoy utilizando aquí, ya que muestro un listado de los checks seleccionados y además tengo una imagen de una cara donde según el checkbox seleccionado se me ilumina una parte de la cara
    – Miguel
    Commented el 8 ago. 2019 a las 10:54

1 respuesta 1

1

Se puede hacer de manera simple con jquery, con las funciones change() y attr(), también puedes pasar el valor de this.checked para activar y desactivar.

Luego para desmarcar los inputs se puede usar prop('checked') y click() de modo que se active el evento asociado a estos.

El código queda de la siguiente forma:

$(document).ready(function() {
  $('#Facialcompleto').change(function(){
    if($('#CuadranteSuperior').prop('checked'))
      $('#CuadranteSuperior').click();
    $('#CuadranteSuperior').attr('disabled', this.checked);
    if($('#CuadranteInferior').prop('checked'))
      $('#CuadranteInferior').click();
    $('#CuadranteInferior').attr('disabled', this.checked);
    if($('#CuelloPapada').prop('checked'))
      $('#CuelloPapada').click();
    $('#CuelloPapada').attr('disabled', this.checked);
    if($('#Cuello').prop('checked'))
      $('#Cuello').click();
    $('#Cuello').attr('disabled', this.checked);
    if($('#Papada').prop('checked'))
      $('#Papada').click();
    $('#Papada').attr('disabled', this.checked);
  })
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<li class="list-group-item listmodifica">
                    Cuadrante superior
                    <label for="CuadranteSuperior" class="switch2">
                       <input id="CuadranteSuperior" name="opciones" type="checkbox" class="warning" value="Cuadrante Superior">
                       <span class="slider5 round"></span>
                    </label>
                  </li>

                  <li class="list-group-item listmodifica">
                    Cuadrante inferior
                    <label for="CuadranteInferior" class="switch2">
                       <input id="CuadranteInferior" name="opciones" type="checkbox" class="warning" value="Cuadrante Inferior">
                       <span class="slider5 round"></span>
                    </label>
                  </li>

                  <li class="list-group-item listmodifica">
                    Cuello y papada
                    <label for="CuelloPapada" class="switch2">
                       <input id="CuelloPapada" name="opciones" type="checkbox" class="warning" value="Cuello y papada">
                       <span class="slider5 round"></span>
                    </label>
                  </li>

                  <li class="list-group-item listmodifica">
                    Escote
                    <label for="Escote" class="switch2">
                       <input id="Escote" name="opciones" type="checkbox" class="warning" value="Escote">
                       <span class="slider5 round"></span>
                    </label>
                  </li>

                  <li class="list-group-item listmodifica">
                    Facial completo
                    <label for="Facialcompleto" class="switch2">
                       <input id="Facialcompleto" name="opciones" type="checkbox" class="warning" value="Facial completo">
                       <span class="slider5 round"></span>
                    </label>
                  </li>

                  <li class="list-group-item listmodifica">
                    Papada
                    <label for="Papada" class="switch2">
                       <input id="Papada" name="opciones" type="checkbox" class="warning" value="Papada">
                       <span class="slider5 round"></span>
                    </label>
                  </li>

                  <li class="list-group-item listmodifica">
                    Cuello
                    <label for="Cuello" class="switch2">
                       <input id="Cuello" name="opciones" type="checkbox" class="warning" value="Cuello">
                       <span class="slider5 round"></span>
                    </label>
                  </li>

Espero resuelva tu problema, saludos.

13
  • Hola gracias @the-breaker funciona bien, pero al volver a desactivar el facial completo los otros checks no funcionan
    – Miguel
    Commented el 8 ago. 2019 a las 10:59
  • @Miguel ya lo corregí Commented el 8 ago. 2019 a las 11:01
  • Una pregunta, a la ver que de deshabilitan de puede hacer unchecked de los seleccionado que desactivamos??? @the-breaker
    – Miguel
    Commented el 8 ago. 2019 a las 11:07
  • @Miguel claro que se puede, pero no haría falta, cuando se deshabilita un input su valor no se envía al hacer submit, pero puedo agregarlo por si acaso. Commented el 8 ago. 2019 a las 11:10
  • Esque te voy a enseñar algo para que entiendas el porque. Entra aquí por favor 82.223.25.247:8360/reservar-cita.php una vez aquí elige: HIFU y le das a siguiente, luego FACIAL y le das a siguiente, si te das cuenta los checks son con estilos y al lado derecho tengo un ticket de lo seleccionado @the-breaker
    – Miguel
    Commented el 8 ago. 2019 a las 11:12

Tu Respuesta

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

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