Question

我正在尝试根据是否选中确认复选框启用/禁用我的提交按钮。简化版本在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：这是正确的链接 - ＆gt; http://jsfiddle.net/94Dur/1/

Answer 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）启用/禁用提交按钮失败

1 个答案: