jQuery UI Buttonset option() Method

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 Buttonset widget is used to give a visual grouping for a group of related buttons.

The jQuery UI buttonset option() method is used for returning an object of key-value pairs that represent the current buttonset options.

Syntax:

$( ".selector" ).buttonset( "option", optionName, value );

Parameters: This method accepts two parameters that are illustrated below:

optionName: This is the name of the option that the user is going to set.
value: This is a value to set for the specified option.

Return values: This method returns an object of key-value pairs that represent the current buttonset options.

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: This example demonstrates the jQuery UI buttonset option() method.

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;"> 
            w3wiki 
        </h1> 
        <h3>jQuery UI Buttonset option() Method</h3> 
        <form> 
            <fieldset> 
                <legend>Button_Set</legend> 
                <div id="ButtonSet_Radio"> 
                    <input id="Company" type="radio" 
                           checked="checked"> 
                    <label for="Company">w3wiki</label> 
                    <input id="Department" type="radio"> 
                    <label for="Department">Computer Science</label> 
                </div> 
            </fieldset> 
        </form> 
        <input type="button" id="Button_for_option" 
               style="padding:5px 15px; margin-top:40px;"
               value="Get the option value"> 
        <div id="log"></div> 
    </center> 
    <script> 
        $(document).ready(function () { 
            $("#ButtonSet_Radio").buttonset(); 
            $("#Button_for_option").on('click', function () { 
                var a = $("#ButtonSet_Radio") 
                    .buttonset("option","disabled", true); 
                $("#log").html(a); 
            }); 
        }); 
    </script> 
</body> 
</html>

Output:

Reference: https://api.jqueryui.com/buttonset/#method-option

HTML

Contact Us