How to disable or enable form submit button in jQuery ?
Given an HTML document and the task is to enable or disable the form submit button in jQuery.
Approach: To enable or disable the form submit button, we use the below code snippet.
$('#enabled').click(function () {
if ($('#submit-button').is(':disabled')) {
$('#submit-button').removeAttr('disabled');
} else {
$('#submit-button').attr('disabled', 'disabled');
}
});In the above code, enabled is the id of the checkbox used and submit-button is the class name of the submit button used .
In the below implementation of the above approach, the jQuery-1.11.js contains the source code that found here ( jQuery v1.11.1 ).
Example: Below is the implementation of the above approach.
HTML
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title> Disable/enable the form submit button </title> <script src="jQuery-1.11.js"></script> <style> h1 { color: green; margin-left: 12px; } .checkbox-round { width: 1.0em; height: 1.0em; background-color: white; border-radius: 50%; vertical-align: middle; border: 1px solid #ddd; -webkit-appearance: none; outline: none; cursor: pointer; padding-right: 2px; margin-left: 8px; } .checkbox-round:checked { background-color: green; } #submit-button { margin-top: 12px; margin-left: 12px; } </style></head> <body> <h1>GeeksforGeeks</h1> <input class="checkbox-round" id="enabled" name="enabled" type="checkbox" value="y" /> I accept the terms and conditionof GeeksforGeeks<br> <input id="submit-button" disabled="disabled" name="Submit" type="submit" value="Accept" /> <script> $('#enabled').click(function () { if ($('#submit-button').is(':disabled')) { $('#submit-button').removeAttr('disabled'); } else { $('#submit-button').attr('disabled', 'disabled'); } }); </script></body> </html> |
Output:
Please Login to comment...