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

Question

我是一名初学者，在使我的代码正常工作时遇到困难。我想通过单击复选框来启用/禁用文件上传按钮。当我只有 1 个上传按钮和一个复选框时，代码可以正常工作，但当我有多个上传按钮和一个复选框时，代码就不能正常工作。有人可以帮忙吗？

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

Answer 1

您有很多 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 事件中初始化所有函数。