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

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，并且在检查布尔值时你不需要==，我也编辑了禁用属性来禁用/启用按钮。
以下代码应该可以工作。

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>