How to disable or enable form submit button in jQuery? Last Updated : 18 Jun, 2024 Comments Improve Suggest changes 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 or enable form submit button in jQuery? S sayantanbose2001 Follow Improve Article Tags : Web Technologies HTML CSS JQuery CSS-Misc jQuery-Misc HTML-Questions jQuery-Questions +4 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 How to enable/disable all input controls inside a form element using jQuery ? Give an HTML document containing a form element. The form element contains input elements, option elements, and button elements. The task is to enable or disable all input controls inside a form using jQuery. It can be done by using prop() method. Using prop() Method: It is used to set or return the 3 min read How to stop a form submit action using jQuery ? In this article, we will learn how to stop a form submit action using jQuery. By default, the HTML form submits automatically. Submitting automatically leads to reloading the whole page again and again. Therefore for performing any operation, we have to prevent its default submission. Given a form, 3 min read How to make a Disable Buttons using jQuery Mobile ? jQuery Mobile is a web based technology used to make responsive content that can be accessed on all smartphones, tablets and desktops. In this article, we will be making a Disable Button using jQuery Mobile. Approach: First, add jQuery Mobile scripts needed for your project. <link rel="stylesheet 1 min read How to find all elements that are disabled in jQuery ? In this article, we will learn how to find all elements on the page that are disabled using jQuery. Approach: The :disabled selector can be used to get all elements on the page that are currently disabled. These elements are iterated over using the each() method. The elements can then be individuall 2 min read Like