Question

我知道这个问题已经被无休止地询问了，但是通过所有答案我仍然无法使我的复选框/按钮功能正常工作。我终于让它停止返回“不是函数”，但是现在它简直无法正常工作。

目的是防止提交表单，除非选中了法律免责声明框。标准的东西，没有结果...请帮助！

function chkThis() {
  var isChk = document.getElementsByName('agecert');
  var isSub = document.getElementById('submit');
  if (isChk.checked == true) {
    isSub.setAttribute("disabled", "false");
  } else {
    isSub.setAttribute("disabled", "disabled");
  }
}

<form>
  <input name="agecert" type="checkbox" onclick="chkThis();" style="float: left;height: 20px;width: 25px;border: 1px solid red;" tabindex="8">
  <p style="font-size: 10pt;left: 30px;position: absolute;text-align: justify;">Legal disclaimer stuffs...</p>
  </div>

  <div name="subres" style="width: 400px;height: 50px;top: 235px;left: 30px;position: relative;border: none;">
    <button name="submit" type="submit" id="submit" style="left: 65px;" tabindex="9" disabled="disabled">Review Order</button>
    <button name="reset" type="reset" style="left: 245px;" tabindex="10">Reset Form</button>
  </div>
</form>

Answer 1

首先getElementsByName返回一个nodeList，您不能直接访问.checked，并且在检查布尔值时不需要==，我还编辑了disable属性以禁用/启用按钮。
以下代码应该可以工作。

function chkThis() {
  var isChk = document.getElementsByName('agecert');
  var isSub = document.getElementById('submit');
  if (isChk[0].checked) {
    isSub.disabled = false;
  } else {
    isSub.disabled = true;
  }
}

<form>
  <input name="agecert" type="checkbox" onclick="chkThis();" style="float: left;height: 20px;width: 25px;border: 1px solid red;" tabindex="8">
  <p style="font-size: 10pt;left: 30px;position: absolute;text-align: justify;">Legal disclaimer stuffs...</p>
  </div>

  <div name="subres" style="width: 400px;height: 50px;top: 235px;left: 30px;position: relative;border: none;">
    <button name="submit" type="submit" id="submit" style="left: 65px;" tabindex="9" disabled="disabled">Review Order</button>
    <button name="reset" type="reset" style="left: 245px;" tabindex="10">Reset Form</button>
  </div>
</form>

Answer 2

attributes和properties是不同的东西，但是有些相关。

attributes来自HTML，而properties是在DOM上设置的。

在某些情况下，更改属性也会更改基础属性，似乎disabled是其中之一。以我的经验，虽然我不能立即想到一个反例，但这并不适用于所有属性。

我提供了演示如何设置和删除属性的代码。我还清理了代码中的其他两个问题。

但是，实际上，克里斯·李（Chris Li）的答案更好，因为它设置了properties，并且是一种更为简洁的方法。

function chkThis() {
  // Note that we are getting the [0] -- the first matching name from the NodeList.
  var isChk = document.getElementsByName('agecert')[0];
  var isSub = document.getElementById('submit');
  if (isChk.checked) {
    isSub.removeAttribute("disabled");
  } else {
    isSub.setAttribute("disabled", "disabled");
  }
}

<form>
  <input name="agecert" type="checkbox" onclick="chkThis();" style="float: left;height: 20px;width: 25px;border: 1px solid red;" tabindex="8">
  <p style="font-size: 10pt;left: 30px;position: absolute;text-align: justify;">Legal disclaimer stuffs...</p>
  </div>

  <div name="subres" style="width: 400px;height: 50px;top: 235px;left: 30px;position: relative;border: none;">
    <button name="submit" type="submit" id="submit" style="left: 65px;" tabindex="9" disabled="disabled">Review Order</button>
    <button name="reset" type="reset" style="left: 245px;" tabindex="10">Reset Form</button>
  </div>
</form>

复选框上的setAttribute函数不影响目标按钮

2 个答案: