How to Enable / Disable Submit Button using Javascript According to any CheckBox is Checked on a WEB Page
While developing your HTML code, you may want to control a submit button and enable or disable the submit button according to a checkbox on the web page.
HTML developers can easily enable a submit button when a checkbox is checked and disable the submit button when the checkbox is unchecked or cleared.
If you want to control the button due to the checked/unchecked status of a single checkbox, this is relatively easy and can be managed by Javascript coding and the onClick event of the Checkbox HTML control.
The Javascript code that programmers should develop will get confusing if you have to control a numerous checkboxes on the web page for the submit button to enable or disable.
If this is the case, you have a few alternative solutions for determining the state of the submit button.
On every OnClick event, developers can control every checkbox and if any of the checkboxes is checked then they can enable the submit button.
An other method can be keeping a list of checked checkboxes and on every OnClick event you can add the checkbox to the list if it is checked, or remove from the list if it is cleared.
Then you can check the list and if the list has no items then disable the button and if the list has items you can enable the submit button.
I want to show the second method to control the enable or disable status of a button using javascript with keeping a list of checked checkbox items.
|
|
First, you should copy and paste the below javascript code with the js function named EnableDisableButton into the HTML code.
<script type="text/javascript">
var idList = ";"
document.getElementById('textbox1').value = idList;
function EnableDisableButton(cb, id) {
if (cb.checked == 1) {
idList = idList + id + ";"
document.getElementById('textbox1').value = idList;
}
if (cb.checked == 0) {
var v;
v = ";" + id + ";"
idList = idList.replace(v, ";");
document.getElementById('textbox1').value = idList;
}
if (idList == ";") {
document.getElementById('button1').disabled = true;
} else {
document.getElementById('button1').disabled = false;
}
}
</script>
Second, you should add the EnableDisableButton() function to the onClick event of the checkbox control as follows:
onclick="javacript:EnableDisableButton(this,value);"
As you can see in the javascript source code, textbox1 html control is used to display the content of the idList variable which is used in the function to keep concatenated values of the checkbox items.
If a checkbox is checked, then the value of the related checkbox is added to the idList variable.
If the checkbox is cleared/unchecked then the value of the checkbox is removed by replacing its value using Javascript string object Replace method.
The last control is the idList variable control. If it has no value then the submit button is disabled. If there is a value in the idList variable then the submit button is enabled.