Javascript 选中复选框时启用提交按钮

我已经尝试了一些在选中复选框时启用提交按钮的示例，但是我一无所获。下面是我的一次尝试，在选中复选框之前，“提交”按钮处于禁用状态。请让我知道我错过了什么

功能已检查（子1）{
var myLayer=document.getElementById（sub1）；
var input=myLayer.childNodes[0]；
if（input.checked==true）{
myLayer.disabled=“”；
}否则{
myLayer.disabled=“disabled”；
}
}

我已阅读并同意条款和条件

---

尝试使用此JQuery函数

$(function() {
    $('#termsChkbx').click(function() {
        if ($(this).is(':checked')) {
            $('#sub1').removeAttr('disabled');
        } else {
            $('#sub1').attr('disabled', 'disabled');
        }
    });
});

示例

我已阅读并同意本条款和条件


$（函数（）{
$（'#termsChkbx'）。单击（函数（）{
如果（$（this）.is（':checked'））{
$（'#sub1'）.removeAttr（'disabled'）；
}否则{
$（'#sub1'）.attr（'disabled'，'disabled'）；
}
});
});

像这样试试

<input type="checkbox" id="termsChkbx " onchange="isChecked(this,'sub1')"/></p>
 <p><input type="submit" name="submit" value="Order now!" id="sub1" disabled="disabled"/></p>

---

以下是完整的代码

<p style="color: #FF0000; font-weight: bold;">I have read and agree to the terms and conditions
    <input type="checkbox" id="termsChkbx " onclick="change_button(this,'sub1')"/>
</p>
<p><input type="submit" name="submit" value="Order now!" id="sub1" disabled="disabled"/></p>

<script type = "text/javascript">
function change_button(checkbx,button_id) {
    var btn = document.getElementById(button_id);
    if (checkbx.checked == true) {
        btn.disabled = "";
    } else {
        btn.disabled = "disabled";
    }
}
</script>

我已阅读并同意条款和条件

功能更改按钮（选中BX，按钮id）{ var btn=document.getElementById（按钮id）； if（checkbx.checked==true）{ btn.disabled=“”； }否则{ btn.disabled=“disabled”； } } 没有人解释为什么您的代码不起作用

首先，您没有正确选择

input

checkbox元素。它不是button元素的子节点。您可以通过在

onchange

事件中传递

this

来获取对复选框的引用，也可以传递

事件

对象并通过

事件访问复选框元素。target

属性：

例如：

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

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

在更改了一些内容后，它将按预期工作：

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

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

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

作为补充说明，我强烈建议使用不引人注目的JavaScript并向元素添加事件侦听器，以避免内联

onchange

事件：

---

使用浏览器的调试控制台可以轻松检查主要问题。在那里，您可以立即看到异常

试试这个：

Html:

---

但请注意，此代码片段不是最佳实践。它只解决了您当前的问题，而不使用jQuery之类的库。

虽然您的问题已经解决，但这里不需要JavaScript。 这可以通过纯CSS/HTML实现：

input[type=“checkbox”]：未（：选中）~input[type=“submit”]{
指针事件：无；
选项卡索引：-1；
颜色：灰色文本；
}

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

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

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

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

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

<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', this.checked);" />
</p>
<p>
    <input type="submit" name="submit" value="Order now!" id="sub1" disabled="disabled" />
</p>

function checked(sub1, checkedState) {
    document.getElementById(sub1, this).disabled = !checkedState;
}