How can I get my checkboxes to enable/disable onclick?-CodePudding

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!

CodePudding user response：

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.