Open In App

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

Last Updated : 14 Dec, 2023
Improve
Improve
Like Article
Like
Save
Share
Report

In this article, we will learn to disable a button in the 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 out using jQuery based on the following approaches.

Approach 1: Using the prop() method 

In this approach, the button of the dialog box will be disabled using the prop() method by passing the disabled property and true as the value of it inside the prop() method.

Syntax:  

$(selector).dialog();
$(selector).prop('disabled', true);  

Example: The below example illustrates how to disable a button in a jQuery dialog from a function with the help of the 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=
 
    <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 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: 

diableBtnGIF

Approach 2: Using the attr() method

In this approach, the button of the dialog box will be disabled using the attr() method by passing the disabled property and true as the value of it inside the attr() method.

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=
 
    <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 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: 

diableBtnGIF

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



Like Article
Suggest improvement
Share your thoughts in the comments

Similar Reads