jQuery UI Button option() Method

Last Updated : 25 May, 2022

jQuery UI consists of GUI widgets, visual effects, and themes implemented using HTML, CSS, and jQuery. jQuery UI is great for building UI interfaces for the webpages.

The jQuery UI Button option() method is used to set or return the value currently associated with the specified element.

Syntax:

option(optionName): Returns the value currently associated with the specified optionName.

var isDisabled = $(".selector").button("option", "disabled");

option(): It returns the object containing key/value pairs that represent the current button options hash.

var options = $( ".selector" ).button( "option" );

option( optionName, value ): It sets the value of the button option that is associated with the specified optionName.

$( ".selector" ).button( "option", "disabled", true );

option(options): It sets one or more options for the button element.

$( ".selector" ).button( "option", { disabled: true } );

CDN Link: First, add jQuery UI scripts needed for your project.

<link rel=”stylesheet” href=”//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css”>
<script src=”//code.jquery.com/jquery-1.12.4.js”></script>
<script src=”//code.jquery.com/ui/1.12.1/jquery-ui.js”></script>

Example: The following code demonstrates the button() method of jQuery UI.

HTML

<!doctype html> 
<html lang="en"> 
  
<head> 
    <meta charset="utf-8"> 
    <link rel="stylesheet" href= 
"//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css"> 
    <script src= 
"//code.jquery.com/jquery-1.12.4.js"></script> 
    <script src= 
"//code.jquery.com/ui/1.12.1/jquery-ui.js"> 
    </script> 
</head> 
  
<body> 
    <center> 
        <h1 style="color: green;"> 
            GeeksforGeeks 
        </h1> 
  
        <h3>jQuery UI Button option() Method</h3> 
  
        <button>GFG Button</button> 
        <br><br> 
  
        <input type="button" id="divID" 
               style="padding: 5px 15px;" 
               value="Set option() Method Value"> 
    </center> 
  
    <script> 
        $(document).ready(function () { 
            $("button").button(); 
  
            $("#divID").on('click', function () { 
                $("button").button("option", "disabled", true); 
            }); 
        }); 
    </script> 
</body> 
</html>