How to disable or enable form submit button in jQuery? Last Updated : 18 Jun, 2024 Summarize Comments Improve Suggest changes Share Like Article Like Report Enabling or disabling the form submit button based on a checkbox selection in jQuery. This ensures user compliance with terms and conditions before form submission. Syntax:$('#enabled').click(function () { if ($('#submit-button').is(':disabled')) { $('#submit-button').removeAttr('disabled'); } else { $('#submit-button').attr('disabled', 'disabled'); }});Example 1: The example shows jQuery to dynamically enable/disable the submit button based on the checkbox state, ensuring terms acceptance before submission. It structures HTML with a checkbox and submit button, complemented by CSS for styling. HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> Disable/enable the form submit button </title> <script src= "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.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: OutputExample 2: In this example the jQuery to dynamically enable or disable the submit button based on checkbox selection, ensuring terms acceptance before submission. It features styled UI elements, including a checkbox for agreement and a visually distinct submit button. HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Toggle Submit Button</title> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> </script> <style> body { font-family: Arial, sans-serif; margin: 0; padding: 20px; text-align: center; } #checkbox-label { font-weight: bold; } #submitButton { padding: 10px 20px; border: none; background-color: #007bff; color: #fff; font-size: 16px; cursor: pointer; transition: background-color 0.3s ease; } #submitButton:disabled { background-color: #ccc; cursor: not-allowed; } </style> </head> <body> <h1>Toggle Submit Button</h1> <div> <label id="checkbox-label" for="agree-checkbox"> Agree to Terms: </label> <input type="checkbox" id="agree-checkbox"> </div> <br> <button id="submitButton" disabled> Submit </button> <script> $(document).ready(function () { $('#agree-checkbox').change(function () { $('#submitButton').prop('disabled', !$(this) .is(':checked')); }); }); </script> </body> </html> Output: Output Comment More infoAdvertise with us Next Article How to Disable Submit Button on Form Submit in JavaScript ? S sayantanbose2001 Follow Improve Article Tags : JQuery CSS-Misc jQuery-Misc HTML-Questions jQuery-Questions +1 More Similar Reads How to disable form submit on enter button using jQuery ? There are two methods to submit a form, Using the "enter" key: When the user press the "enter" key from the keyboard then the form submit. This method works only when one (or more) of the elements in the concerned form have focus. Using the "mouse click": The user clicks on the "submit" form button. 2 min read How to enable/disable a button using jQuery ? Enabling/disabling a button using jQuery involves altering its functionality to either accept user input or not. This is typically done by manipulating its 'disabled' property or attribute through jQuery methods like `.prop()` or .attr().To enable/disable a button using jQuery, you'll need a basic H 2 min read How to Disable Submit Button on Form Submit in JavaScript ? Forms are a crucial part of web development as they allow users to submit data to a server. However, sometimes we want to customize the behavior of HTML forms and prevent the default behavior from occurring. This allows you to create a more interactive and user-friendly web application. In this arti 3 min read How to Disable a Button in jQuery UI ? To disable a button in jQuery UI, we will be using disable() method which is discussed below: jQuery UI disable() method is used to completely disable the button. It returns the button element completely to its initial state. Syntax: $(".selector").button("disable") Parameters: This method does not 2 min read How to enable or disable nested checkboxes in jQuery ? In this article, we will see how to enable or disable nested checkboxes in jQuery. To do that, we select all child checkboxes and add disabled attributes to them with the help of the attr() method in jQuery so that all checkboxes will be disabled. Syntax: // Select all child input of type checkbox / 2 min read How to disable a button in jQuery dialog from a function ? In this article, we will learn to disable a button in the jQuery dialog from a function. The basic dialog window is an overlay positioned within the viewport and is protected from page content which is jQuery's User Interface. To disable the button in a jQuery dialog from a function carried out usin 3 min read Like