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

Question

我知道这个问题已经被无休止地问过了，但是看完所有的答案我仍然无法让我的 checkbox/button 功能发挥作用。我终于让它停止返回 "is not a function" 但现在它根本无法正常工作。

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

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 returns一个nodeList，不能直接访问.checked，检查boolean时不需要==，我也把disable 属性改成了disable/enable 按钮。
以下代码应该有效。

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 函数不影响目标按钮

setAttribute function on checkbox not affecting target button

javascript

checkbox

disable