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

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

首先，您没有正确选择input复选框元素。它不是按钮元素的子节点。您可以通过在 onchange 事件中传递 this 来获取对复选框的引用，也可以传递 event 对象并通过 event.target 属性访问复选框元素：

例如：

<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";
    }
}

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

这里的例子

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

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

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

这里的例子

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 " 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>

像这样尝试

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

.JS

function isChecked(chk,sub1) {
    var myLayer = document.getElementById(sub1);
    if (chk.checked == true) {
        myLayer.disabled = false;
    } else {
        myLayer.disabled = true;
    };
}

普伦克尔

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

试试这个：

目录：

<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>

JavaScript：

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

但请注意，此代码片段不是最佳做法。它只是解决了您当前的问题，而无需使用 jQuery 等库。

尝试使用此 JQuery 函数

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

例

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p style="color: #FF0000; font-weight: bold;">I have read and agree to the terms and conditions
    			<input type="checkbox" id="termsChkbx" /></p>
    
    			<p><input type="submit" name="submit" value="Order now!" id="sub1" disabled="disabled"/></p>
<script>
$(function() {
    $('#termsChkbx').click(function() {
        if ($(this).is(':checked')) {
            $('#sub1').removeAttr('disabled');
        } else {
            $('#sub1').attr('disabled', 'disabled');
        }
    });
});
</script>

虽然你的问题已经解决，但这里不需要JavaScript。这可以用纯CSS/HTML来完成：

input[type="checkbox"]:not(:checked) ~ input[type="submit"]{
  pointer-events: none;
  tab-index: -1;
  color: graytext;
}

<input type="checkbox"/>
<input type="submit" id="submit" value="submit" onclick="this.value='clicked';"/>

我使用:not()伪类来检测何时未勾选复选框，因为这是 w3c 推荐的方法。我不确定复选框与按钮相关的位置(在 HTML 中(，所以我使用波浪号(~通用兄弟选择器(来查找按钮。如果复选框紧挨着按钮，我建议改用相邻的同级选择器+。

但是，如果您有多个复选框，并且只希望一个复选框切换按钮的状态，那么使用 ：nth-of-type 伪类或id可能更合适：

input[type="checkbox"]:nth-of-type(2):not(:checked) ~ input[type="submit"]{
  pointer-events: none;
  tab-index: -1;
  color: graytext;
}

<input type="checkbox"/>
<input type="checkbox"/>
<input type="checkbox"/>
<input type="submit" id="submit" value="submit" onclick="this.value='clicked';"/>

否则，所有复选框都是"必需的">

input[type="checkbox"]:not(:checked) ~ input[type="submit"]{
  pointer-events: none;
  tab-index: -1;
  color: graytext;
}

<input type="checkbox"/>
<input type="checkbox"/>
<input type="checkbox"/>
<input type="submit" id="submit" value="submit" onclick="this.value='clicked';"/>