How to Disable a button in jQuery Dialog?

Board Infinity -

Introduction

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>

write your code here: Coding Playground

Output:

Method 2

  • Focus on the button because it has the class ui-button by default in the UI Dialog box.
  • Create a method that will launch a dialogue box when the page loads.
  • When you want to disable the button with class ui-button, use the jQuery method attr("disabled", true).

Example 2:

<!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: rgb(13, 20, 203);
            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 'x'
    icon or the close button below can be used to move, resize,
    or shut the dialogue window, but utilising the attr(); method of jQuery will disable it.
        </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>

write your code here: Coding Playground

Output:

Conclusion

In this article, we understood how to disable a button in jquery dialog from a function with two examples.