使用id与class名获取元素禁用textbox的代码不生效原因求解

问题原因 #

• 核心错误是DOM方法名拼写错误：原生JS获取类名对应元素的方法是document.getElementsByClassName()，你的代码漏写了Element后面的s，错误写成了getElementByClassName，导致无法正常获取到对应class的元素集合，后续操作自然失效。
• 你用索引[0]取第一个匹配元素的逻辑本身是正确的，只要修正方法名就可以正常运行。

修正后的完整代码 #

JS代码 #

function disableText() {
  // 修正方法名，Element后补充s
  var textbox = document.getElementsByClassName("text");
  if (document.getElementById("check").checked) {
    textbox[0].disabled = true;
  } else {
    textbox[0].disabled = false;
  }
}

HTML代码 #

<input type="checkbox" id="check" value="check" onclick="disableText()">
<input class="text" type="textbox">

可选优化 #

你可以直接将复选框的checked状态赋值给disabled属性，省略if判断，简化代码：

function disableText() {
  const textbox = document.getElementsByClassName("text")[0];
  textbox.disabled = document.getElementById("check").checked;
}

内容的提问来源于stack exchange，提问作者Lernord mac