如何禁用/啟用帶有多個復選框的多個上傳按鈕

Question

我是一個初學者，無法使我的代碼正常工作。 我想通過單擊一個復選框來啟用/禁用文件上傳按鈕。 當我只有一個上傳按鈕和一個復選框時，代碼工作正常，但是當我只有一個上傳按鈕和一個復選框時，代碼則無法正常工作。 誰能幫忙嗎？

這是JSFiddle預覽 。

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

};

更新的小提琴

Answer 3

您有許多window.onload，因此在腳本末尾只有最后一個處於活動狀態。 一個window.onload就足夠了，然后您可以一起運行所有功能。 試試這個更新的演示 。

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事件中初始化所有函數。