The default dialogue window is a viewport-positioned overlay that is shielded from the page's content, which includes jQuery's User Interface. The following methods can be used to disable the button in a jQuery dialogue from a code that uses jQuery.
Method 1
Focus on the button because it has the class ui-button by default in the UI Dialog box.
Make a method that will launch a dialogue box when the page loads.
Then, to disable the button with a class ui-button, use the jQuery method prop('disabled', true).
Syntax:
$(selector).dialog();
$(selector).prop('disabled', true);
Example 1: The example below shows how to use the prop() method to disable a button in a jQuery dialogue box from a function.
<!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: rgb(58, 170, 58); 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> The default dialogue, which is helpful for displaying information, looks like this. The dialogue window can be dragged, resized, and dismissed with the 'x' icon or the close button below, but it can also be disabled 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>
