How to disable a button in jQuery dialog from a function ?

27 Sep, 2021
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 using jQuery based on the following approaches. 
Approach 1:  
In UI Dialog box, button as default class called ui-button so focus on it.
Create a function that should trigger dialog box in ready that is on page load.
Then use jQuery method prop(‘disabled’, true) to disable that button with class ui-button.
Syntax:  
$(selector).dialog();
$(selector).prop('disabled', true);
Example: Below example illustrates how to disable a button in a jQuery dialog from a function with help of prop() method.  
html
<!DOCTYPE html><html lang="en">     <head>    <meta charset="utf-8">    <meta name="viewport"        content="width=device-width, initial-scale=1">         <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">         <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">     <script src=        "https://code.jquery.com/jquery-1.12.4.js">    </script>         <script src=        "https://code.jquery.com/ui/1.12.1/jquery-ui.js">    </script>         <style>        .ui-widget-header {            background: green;            color: #ffffff;        }                 #dialog {            box-shadow: 1rem .5rem 1rem                rgba(0, 0, 0, .15) !important;                             padding: 20px;        }    </style></head> <body>    <div id="dialog" title="jQuery UI Basic dialog">                  <p>            This is the default dialog which is useful            for displaying information. The dialog            window can be moved, resized and closed            with the 'x' icon or use close button below,            but it is disable using jQuery's prop();            method.        </p>                  <button type="button" class=            "ui-button ui-widget" title="Close">            Close        </button>    </div>         <script>        $(function() {                         // Trigger dialog box            $("#dialog").dialog();                         // attr() method applied here            $(".ui-button").prop('disabled', true);        });    </script></body> </html>
Output: 
Approach 2:  
In UI Dialog box, button as default class called ui-button so focus on it.
Create a function that should trigger dialog box in ready that is on page load.
Then use jQuery method attr(‘disabled’, true) to disable that button with class ui-button.
Syntax:  
$(selector).dialog();
$(selector).attr('disabled', true);
Example: Below example illustrates how to disable a button in a jQuery dialog from a function with help of attr() method.  
html
<!DOCTYPE html><html lang="en"> <head>    <meta charset="utf-8">         <meta name="viewport"        content="width=device-width, initial-scale=1">         <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">     <script src="        https://code.jquery.com/jquery-1.12.4.js">    </script>         <script src=        "https://code.jquery.com/ui/1.12.1/jquery-ui.js">    </script>     <style>        .ui-widget-header {            background: red;            color: #ffffff;        }                 #dialog {            box-shadow: 1rem .5rem 1rem rgba(            0, 0, 0, .15)!important;            padding: 20px;        }    </style></head> <body>    <div id="dialog"        title="jQuery UI Basic dialog">              <p>            This is the default dialog which is            useful for displaying information.            The dialog window can be moved,            resized and closed with the 'x'            icon or use close button below,            but it is disable using jQuery's            attr(); method.        </p>                  <button type="button" class=            "ui-button ui-widget" title="Close">            Close        </button>    </div>         <script>        $(function() {                         // Trigger dialog box            $("#dialog").dialog();                         // attr() method applied here            $(".ui-button").attr('disabled', true);        });    </script></body> </html>
Output: 
Reference: https://www.geeksforgeeks.org/jqueryui-dialog/ 
jQuery is an open source JavaScript library that simplifies the interactions between an HTML/CSS document, It is widely famous with it’s philosophy of “Write less, do more”. You can learn jQuery from the ground up by following this jQuery Tutorial and jQuery Examples. 
rajeev0719singh
jQuery-Misc
Picked
JQuery
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Form validation using jQuery
jQuery | children() with Examples
Scroll to the top of the page using JavaScript/jQuery
How to Dynamically Add/Remove Table Rows using jQuery ?
How to get the value in an input text box using jQuery ?
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
Difference between var, let and const keywords in JavaScript
How to insert spaces/tabs in text using HTML/CSS?
How to fetch data from an API in ReactJS ?