javascript - 选中复选框时启用提交按钮

Question

我尝试了一些在选中复选框时启用提交按钮的示例，但我无处可去。以下是我的尝试之一，在选中复选框之前，提交按钮处于禁用状态。请让我知道我错过了什么。

function checked(sub1) {
  var myLayer = document.getElementById(sub1);
  var input = myLayer.childNodes[0];
  if (input.checked == true) {
    myLayer.disabled = "";
  } else {
    myLayer.disabled = "disabled";
  }
}

<p style="color: #FF0000; font-weight: bold;">I have read and agree to the terms and conditions
  <input type="checkbox" id="termsChkbx " onchange="checked('sub1')" />
</p>

<p>
  <input type="submit" name="submit" value="Order now!" id="sub1" disabled="disabled" />
</p>

Answer 1

没有人解释为什么您的代码不起作用。

一方面，您没有选择 input复选框元素正确。它不是按钮元素的子节点。您可以通过传递 this 来获得对复选框的引用。在 onchange事件，或者您可以通过 event对象并通过 event.target 访问复选框元素属性(property):

例如:

<input type="checkbox" id="termsChkbx " onchange="isChecked(this, 'sub1')" />

然后您可以访问对更改事件触发的复选框元素的引用:

function isChecked(checkbox, sub1) {
  // checkbox
}

在更改了几件事后，它将按预期工作:

function isChecked(checkbox, sub1) {
    var button = document.getElementById(sub1);

    if (checkbox.checked === true) {
        button.disabled = "";
    } else {
        button.disabled = "disabled";
    }
}

但是，您可以简化代码并将其重写为:

Example Here

<input type="checkbox" id="termsChkbx " onchange="isChecked(this, 'sub1')" />

function isChecked(checkbox, sub1) {
    document.getElementById(sub1).disabled = !checkbox.checked;
}

作为旁注，我强烈建议使用不显眼的 JavaScript 并向元素添加事件监听器以避免内联 onchange事件:

Example Here

document.getElementById('termsChkbx').addEventListener('click', function (e) {
  document.getElementById('sub1').disabled = !e.target.checked;
});