JAVASCRIPT DISABLE/ENABLE A SUBMIT BUTTON WHEN A CHECKBOX IS SELECTED
This example shows you how to use javascript to disable or enable a submit button when a checkbox is checked/unchecked ie. selected/deselected. This can be useful in a situation where you want users to agree to something before they can
proceed.
DEMO - Disabling/enabling a submit button when checkbox is selected/unselected:
You'll notice in the above demo that as soon as the page loads, the submit button is disabled. If a user checks the
checkbox, then the submit button becomes active and the user can submit. If the user unchecks the checkbox, the
submit buttom becomes disabled/inactive and the user cannot submit with it.
It's done as follows:
We create a form which we name theForm. We have a checkbox input which we name theCheck. We have a submit buttom
which we name theButton.
<form name="theForm" action="#" method="post">
<input type="checkbox" name="theCheck" value="">I agree to the terms of use.
<input type="submit" name="theButton" value="Download">
</form>
We then create a function which we place in between the <head> </head> tags of the page. We name our
function theChecker (but you can call it anything you want) and place an opening curly brace { after it like so:
function theChecker(){
Now, the logic we would use is if the checkbox is checked, then submit button must NOT be disabled (ie. must be
active) otherwise it MUST BE disabled (ie. not active).
In order to do the above, we must use DOM to reference the checkbox we are talking about so that the javascript
will know which checkbox to provide the action. The DOM reference for our checkbox can be got like this:
document.theForm.theCheck.checked
where document is your page, theForm is your form name and theCheck is your checkbox name. checked is whether it is
checked or not.
We also need to reference our submit button with DOM so javascript will know which submit button we want the action
to be applied to.
document.theForm.theButton.disabled
where document is your page, theForm is your form name and theButton is your submit button name. disabled is
whether it is disabled or not.
We then use an if statement to check whether the checkbox is checked or not. If it is not (false).
if(document.theForm.theCheck.checked==false)
{
If it is not (false) then the submit buttom must be disabled (true).
document.theForm.theButton.disabled=true;
}
otherwise the the submit buttom must be active (disabled false).
else
{
document.theForm.theButton.disabled=false;
}
We then close our function with a closing brace }.
This is the complete function which must be placed in between the head tags:
<script type="text/javascript">
function theChecker()
{
if(document.theForm.theCheck.checked==false)
{
document.theForm.theButton.disabled=true;
}
else
{
document.theForm.theButton.disabled=false;
}
}
</script>
We then adjust our form by adding the onclick event handler onto the checkbox input tag to call the function (see red text):
<form name="theForm" action="#" method="post">
<input type="checkbox" name="theCheck" onclick="theChecker()" value="">I agree to
the terms of use.
<input type="submit" name="theButton" value="Download">
</form>
One more thing left to do. When the page loads, we want the submit button to be disabled, so we adjust the body tag
as follows:
<body onload="document.theForm.theButton.disabled=true">
| 
Home
Computers & Internet
