javascript - 如何禁用/启用带有多个复选框的多个上传按钮

我是一个初学者，无法使我的代码正常工作。我想通过单击一个复选框来启用/禁用文件上传按钮。当我只有一个上传按钮和一个复选框时，代码工作正常，但是当我只有一个上传按钮和一个复选框时，代码则无法正常工作。谁能帮忙吗？

this is JSFiddle preview。

HTML代码

<label>
    <input type="checkbox" id="confirm">
</label>

<input type="file" class="style5" id="abstract" name="abstract" disabled onchange="ValidateSingleInput(this);"/>
<br>

<label>
    <input type="checkbox" id="confirmp">
</label>

<input type="file" class="style5" id="poster" name="poster" disabled onchange="ValidateSingleInput(this);"/>
    <span class="style5"><br>

        <label>
            <input type="checkbox" id="confirmr">
        </label>

        <input type="file" class="style5" id="resume" name="resume" disabled onchange="ValidateSingleInput(this);" />

        <span class="style5">

JavaScript代码

window.onload = function() {
    var checker = document.getElementById('confirm');
    var sbm = document.getElementById('abstract');

    checker.onchange = function () {
        if(this.checked) {
            sbm.disabled = false;
        }
        else {
            sbm.disabled = true;

        }
    };
};

window.onload = function() {
    var checker = document.getElementById('confirmp');
    var sbm = document.getElementById('poster');

    checker.onchange = function () {
        if(this.checked) {
            sbm.disabled = false;
        }
        else {
            sbm.disabled = true;

        }
    };
};

window.onload = function() {
    var checker = document.getElementById('confirmr');
    var sbm = document.getElementById('resume');

    checker.onchange = function () {
        if(this.checked) {
            sbm.disabled = false;
        }
        else {
            sbm.disabled = true;
        }
    };
};

最佳答案

您有许多window.onload，因此在脚本末尾只有最后一个处于活动状态。一个window.onload就足够了，然后您可以一起运行所有功能。尝试此更新的demo。

window.onload = function() {
var checker = document.getElementById('confirm');
var sbm_abstract = document.getElementById('abstract');
var checkerp = document.getElementById('confirmp');
var sbm_poster = document.getElementById('poster');
var checkerr = document.getElementById('confirmr');
var sbm_resume = document.getElementById('resume');


checker.onchange = function () {
    if(this.checked) {
        sbm_abstract.disabled = false;
    }
    else {
        sbm_abstract.disabled = true;

    }
} ;



checkerp.onchange = function () {
    if(this.checked) {
        sbm_poster.disabled = false;
    }
    else {
        sbm_poster.disabled = true;

    }
};

checkerr.onchange = function () {
    if(this.checked) {
        sbm_resume.disabled = false;
    }
    else {
        sbm_resume.disabled = true;

    }
};

};

我将变量重命名为不相互覆盖，并在一个window.onload事件中初始化了所有函数。