Estoy tratando de obtener casillas de verificación, en este caso tituladas "Masculino" y "Femenino" para permitir que se elija una opción. Es decir, haga clic en la casilla de verificación masculina, femenina se atenuará/deshabilitará, desmarque la casilla de verificación masculina, femenina se vuelve a habilitar y se puede hacer clic, lo que posteriormente deshabilitaría la opción de casilla de verificación masculina.
He podido marcar cualquiera de las casillas y hacer que la otra se deshabilite usando "onClick" en línea. Sin embargo, una vez que la otra casilla de verificación se deshabilita, cuando desmarco la casilla elegida, permanece deshabilitada.
<label> <input type="checkbox" onClick="hideFemaleCheckBox()" value="male" id="maleCheckBox"> Male </label> <label> <input type="checkbox" onClick="hideMaleCheckBox()" value="female" id="femaleCheckBox"> Female<br><br> </label>
..
function hideFemaleCheckBox() { let maleCheckBox = document.getElementById('maleCheckBox'); let femaleCheckBox = document.getElementById('femaleCheckBox'); if(maleCheckBox.checked == true) { femaleCheckBox.setAttribute("disabled", "true"); } else if (maleCheckBox.checked == false) { femaleCheckBox.setAttribute("disabled", "false"); } } function hideMaleCheckBox() { let maleCheckBox = document.getElementById('maleCheckBox'); let femaleCheckBox = document.getElementById('femaleCheckBox'); if(femaleCheckBox.checked == true) { maleCheckBox.setAttribute("disabled", "true"); } else if (femaleCheckBox.checked == false) { maleCheckBox.setAttribute("disabled", "false"); } }
Cualquier ayuda para que esto funcione sería apreciada. Todavía estoy aprendiendo, gracias!
Puede eliminar el atributo deshabilitado en Femenino una vez que el usuario desmarcó la casilla de verificación masculina. Vea abajo:
function hideFemaleCheckBox() { let maleCheckBox = document.getElementById("maleCheckBox"); let femaleCheckBox = document.getElementById("femaleCheckBox"); if (maleCheckBox.checked == true) { femaleCheckBox.setAttribute("disabled", "true"); } else if (maleCheckBox.checked == false) { // change here | Use removeAttribute femaleCheckBox.removeAttribute("disabled"); } } function hideMaleCheckBox() { let maleCheckBox = document.getElementById("maleCheckBox"); let femaleCheckBox = document.getElementById("femaleCheckBox"); if (femaleCheckBox.checked == true) { maleCheckBox.setAttribute("disabled", "true"); } else if (femaleCheckBox.checked == false) { // change here | Use removeAttribute maleCheckBox.removeAttribute("disabled"); } }
Utilice la función removeAttribute para eliminar la propiedad deshabilitada.