Question

我是初学者，我在编写代码时遇到问题。我想通过单击复选框启用/禁用文件上载按钮。当我只有一个上传按钮和一个复选框时，代码工作正常，但当我有一个以上时，它不会。有人可以帮忙吗？

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 = function() { ... };时，你将覆盖在窗口加载时将要执行的上一个函数，这就是为什么只有最后一个复选框有效。

因此，要解决此问题，请确保将代码放在同一onload。

中

这应该有效：

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

    var checkerp = document.getElementById('confirmp');
    var sbmp = document.getElementById('poster');

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

    var checkerr = document.getElementById('confirmr');
    var sbmr = document.getElementById('resume');

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

Answer 2

您只需要一个window.onload。

试试这个：

   window.onload = function () {

      var checker = document.getElementById('confirm'),
      sbm = document.getElementById('abstract'),
      checker2 = document.getElementById('confirmp'),
      sbm2 = document.getElementById('poster'),
      checker3 = document.getElementById('confirmr'),
      sbm3 = document.getElementById('resume');

      checker.onchange = function () {
           enableDisable(checker, sbm);
      };

      checker2.onchange = function () {
           enableDisable(checker2, sbm2);
      };

      checker3.onchange = function () {
           enableDisable(checker3, sbm3);
      };

      function enableDisable(target, btn) {
           btn.disabled = target.checked ? false : true;
      };

};

更新了fiddle

Answer 3

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

如何禁用/启用具有多个复选框的多个上载按钮

3 个答案: