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?
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;
}
};
};
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.
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments