How to disable a button in 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 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.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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=
  
    <script src=
    </script>
      
    <script src=
    </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 diable 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>

chevron_right


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.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="utf-8">
      
    <meta name="viewport"
        content="width=device-width, initial-scale=1">
      
    <link rel="stylesheet" href=
  
    <script src="
    </script>
      
    <script src=
    </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 diable 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>

chevron_right


Output:

Reference: https://www.geeksforgeeks.org/jqueryui-dialog/




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.


Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.