How to disable/enable multiple upload buttons with multiple checkboxes

Question

I am a beginner and am having trouble making my code work. I want to enable/disable a file upload button by clicking a check box. the code works fine when I have only 1 upload button and one check box but it does not when I have more then one. Can anyone please help?

this is JSFiddle preview .

html code

<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 code

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

Whenever you write a new window.onload = function() { ... }; you are overwriting the previous function that was going to be executed when the window loads, and that's why only the last check box works.

So, to solve the problem, make sure you put your code inside the same onload .

This should work:

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

You only need one window.onload .

Try this:

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

};

Updated fiddle

Answer 3

You have many window.onload so only the last one is active by the end of the script. One window.onload is enough and then you can run all your functions together. Try this updated 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;

    }
}; 

};

I renamed the variables to not override each other and i initialize all your functions in one window.onload event.