How to Disable a Button in jQuery UI ? Last Updated : 31 Dec, 2020 Summarize Comments Improve Suggest changes Share Like Article Like Report 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 accept any parameters. Return values: This method simply returns the button to its pre-initial state. Links for jQuery UI libraries: <link rel=’stylesheet’href=”http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/ui-lightness/jquery-ui.css”><script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js”> </script><script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js"> </script> OR <link rel=’stylesheet’href=”https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css”><script src=”https://code.jquery.com/jquery-1.10.2.js”> </script><script src=”https://code.jquery.com/ui/1.10.4/jquery-ui.js"> </script> Below are the example which shows the implementation of this method. Example 1: HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content= "width=device-width, initial-scale=1"> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"> </script> <script src= "https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js"> </script> <link href= "http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/ui-lightness/jquery-ui.css" rel="stylesheet" type="text/css" /> <style> .height { height: 10px; } </style> <script> $(function () { $("#buttonId").button(); $('#buttonId').click(function (event) { event.preventDefault(); $(this).button("disable"); console.log("The button is disabled successfully") }); }); </script> </head> <body> <h1 style="color:green">GeeksforGeeks</h1> <b>jQueryUI | Button disable Method</b> <div class="height"> </div><br> <button id="buttonId">Button element</button> </body> </html> Output: Example 2: HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content= "width=device-width, initial-scale=1"> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"> </script> <script src= "https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js"> </script> <link href= "http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/ui-lightness/jquery-ui.css" rel="stylesheet" type="text/css" /> <style> .height { height: 10px; } </style> <script> $(function () { $("#buttonId, #submitId, #anchorId").button(); $('#buttonId, #submitId, #anchorId') .click(function (event) { event.preventDefault(); $(this).button("disable"); }); }); </script> </head> <body> <h1 style="color:green">GeeksforGeeks</h1> <b>jQueryUI | Button disable Method</b> <div class="height"> </div><br> <div class="buttons-div"> <button id="buttonId">Button element</button> <input id="submitId" type="submit" value="Submit button"> <a id="anchorId" href="">Anchor</a> </div> </body> </html> Output: Reference: https://api.jqueryui.com/button/ Comment More infoAdvertise with us Next Article How to Disable an datepicker in jQuery UI ? T taran910 Follow Improve Article Tags : JQuery HTML-Misc jQuery-UI Similar Reads How to destroy a button in jQuery UI ? To destroy a button in jQuery UI we will be using destroy() method which is discussed below: jQuery UI destroy() Method is used to remove the complete functionality of the button. It returns the button element completely to its initial state. Syntax: $(".selector").button("destroy") Parameters: This 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 jQuery UI Button disable() Method jQuery UI consists of GUI widgets, visual effects, and themes implemented using HTML, CSS, and jQuery. jQuery UI is great for building UI interfaces for the webpages. The jQuery UI Button disable() method is used to disable the button widget. It does not accept any parameter. Syntax: $(".selector"). 1 min read How to Disable an datepicker in jQuery UI ? To disable a datepicker in jQuery UI we will be using disable() method which is discussed below: jQuery UI disable() method is used to disable the datepicker. Syntax: $( ".selector" ).datepicker( "disable" )Parameters: This method does not accept any parameters. Return values: This method returns an 1 min read jQuery UI Button disabled Option jQuery UI consists of GUI widgets, visual effects, and themes implemented using HTML, CSS, and jQuery. jQuery UI is great for building UI interfaces for the webpages. The jQuery UI Button disabled option is used to disable the button element if it set to true. Syntax: $( ".selector" ).button({ disab 1 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 Like