时间戳

首页 > 解决方案 > 如何让我的复选框启用/禁用 onclick？

javascript - 如何让我的复选框启用/禁用 onclick？

问题描述

我正在尝试获取复选框，在这种情况下，标题为“男性”和“女性”，以允许选择一个选项。即，单击男性，女性复选框变灰/禁用，取消选中男性，女性复选框重新启用并能够单击，这随后将禁用男性复选框选项。

我已经能够选中任何一个框并使用“onClick”内联禁用另一个框。但是，一旦另一个复选框禁用，当我取消选中所选框时，它就会保持禁用状态。

                          <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");     
              }
              
        }

任何帮助来完成这项工作将不胜感激。我还在学习中，谢谢！

标签： javascripthtml

解决方案

一旦用户取消选中男性复选框，您可以删除女性上的禁用属性。见下文：

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");
  }
}

使用 removeAttribute 函数删除禁用的属性。

推荐阅读