javascript - 根据复选框启用/禁用提交按钮时出现问题 (JavaScript)-6ren

javascript - 根据复选框启用/禁用提交按钮时出现问题 (JavaScript)

转载作者：行者123 更新时间：2023-12-03 12:08:36

我正在尝试根据是否选中确认复选框来启用/禁用我的提交按钮。简化版本在 jsfiddle 上工作得很好，但由于某种原因它在我的实际代码中不起作用。原始代码如下:

<div class="form-group">
    <div class="col-md-offset-3 col-md-6">
        <label>
            <input type="checkbox" id="confirm">The above information is correct.
        </label>
    </div>
</div>        
<div class="form-group" style="float:right">
    <input type="submit" class="btn btn-primary" id="sbmBtn" value="Submit" disabled>
    <input type="reset" class="btn btn-default" id="clrBtn" value="Clear">
</div>

我使用了与功能 jsfiddle 代码中相同的方法(当然具有正确的 ID)，但它似乎不起作用..我什至将 jsfiddle 代码复制粘贴到编辑器中，保存并打开该页面也不起作用。

有人知道问题出在哪里吗？

编辑:这也是 javascript:

var checker = document.getElementById('confirm');
var sbm = document.getElementById('sbmBtn');
checker.onchange = function () {
    if(this.checked) {
        sbm.disabled = false;
    } 
    else {
        sbm.disabled = true;
    }
}

编辑2:这是正确的链接 --> http://jsfiddle.net/94Dur/1/

最佳答案

当您从浏览器中的文件运行该代码时，该代码应该可以工作。

我怀疑您在 <body> 之前添加了 JavaScript您的页面。这意味着选择器 document.getElementById('confirm')在加载页面之前运行，这意味着它找不到该元素，这又会导致 onchange - 功能未添加到元素中。

你应该尝试这样做:

window.onload = function() {
    var checker = document.getElementById('confirm');
    var sbm = document.getElementById('sbmBtn');
    checker.onchange = function () {
        if(this.checked) {
            sbm.disabled = false;
        } 
        else {
            sbm.disabled = true;
        }
    } 
}

这将确保您的 JavaScript 在页面内容加载之前不会运行。

关于javascript - 根据复选框启用/禁用提交按钮时出现问题 (JavaScript)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25066688/