0

Hola quisiera saber si existe alguna forma de dejar fijo al dar clic una de las dos opciones del checkbox y deshabilitar la otra opción no elegida, solo logro desactivar el checkbox elegido utilizando e.target.disabled = true en una función.

 <span>Si 
     <input value={objeto} type="checkbox" onChange={(e) =>  {setName(e.target.value);}} onInput={save} placeholder="Name" /> 
     </span>
      
  <span>No
     <input value={item} type="checkbox" onInput={save} placeholder="Name"  /> 
     </span>
1
  • La forma más facil es usar botones de radio, pues para eso estan, para autoexcluirse. O sea, type="radio" en lugar de type="checkbox" (eso sí debes agregar un atributo name= identico en ambos)
    – masterguru
    Commented el 17 nov. 2022 a las 23:50

1 respuesta 1

0

La forma más facil es usar botones de radio, pues para eso estan, para autoexcluirse. O sea, type="radio" en lugar de type="checkbox".

Eso sí, debes agregar un atributo name= idéntico en ambos.

Ejemplo:

<span>Si 
     <input name="botonRadio" value={objeto} type="radio" onChange={(e) =>  {setName(e.target.value);}} onInput={save} placeholder="Name" /> 
</span>

<span>No
     <input name="botonRadio" value={item} type="radio" onInput={save} placeholder="Name"  /> 
</span>

Tal como has indicado en el comentario, si lo que quieres es deshabilitar el otro checkbox y que no haya vuelta atrás puedes hacerlo del siguiente modo:

function deshabilitarCasilla(el) {
  casillas = document.querySelectorAll('.casilla')
  casillas.forEach(x => x.disabled = "disabled");
  // Si quieres que siga activo el seleccionado descomenta la siguiente línea
  // el.disabled=''
}
<span>Si
  <input class="casilla" onclick="deshabilitarCasilla(this)" value={objeto} type="checkbox" />
</span>

<span>No
  <input class="casilla" onclick="deshabilitarCasilla(this)" value={item} type="checkbox" placeholder="Name" />
</span>

Así seria con botones de radio, dejándo el seleccionado sin deshabilitar (porque si esta disabled luego no se envia en un formulario, si es que lo tienes dentro de uno).

function deshabilitarCasilla(el) {
  radioBotones = document.querySelectorAll('.radioBoton')
  radioBotones.forEach(x => x.disabled = "disabled");
  el.disabled = ''
}
<span>Si 
     <input class="radioBoton" onclick="deshabilitarCasilla(this)" name="botonRadio" value={objeto} type="radio"  placeholder="Name" /> 
</span>

<span>No
     <input class="radioBoton" onclick="deshabilitarCasilla(this)" name="botonRadio" value={item} type="radio" placeholder="Name"  /> 
</span>

3
  • Pero lo que quiero lograr es supongamos que elegí el Si, que ya no se pueda modificar ni poder dar click en No Commented el 18 nov. 2022 a las 0:21
  • He actualizado mi respuesta, pero no se si te servirá, ya comentas lo que falte.
    – masterguru
    Commented el 18 nov. 2022 a las 0:33
  • Y acabo de agregar una última opción que me parece más indicada, con botones de radio, pues dejo el boton de radio activo y podrá ser enviado en un formulario normal, y al deshabilitar el otro ya no se puede quitar la selección.
    – masterguru
    Commented el 18 nov. 2022 a las 0:39

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.