I am trying to get checkboxes, in this case titled "Male" and "Female" to allow one option to be chosen. Ie, click male, female checkbox gets grayed out/disabled, uncheck male, female checkbox re-enables and is able to clicked which would subsequently disabled the male checkbox option.
I have been able to check either box and get the other to disable using "onClick" inline. However once the other checkbox disables, when I uncheck the chosen box it stays disabled.
<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");
}
}
Any help to get this working would be appreciated. I am still learning, thank you!
You can remove the disabled attribute on Female once the user unchecked male checkbox. See below:
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");
}
}
Use removeAttribute function to remove the disabled property.