Skip to content
Related Articles

Related Articles

jQuery UI Buttonset disabled Option

View Discussion
Improve Article
Save Article
  • Last Updated : 10 Jan, 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 buttonset widget is used to give a visual grouping for a group of related buttons.

The jQuery UI buttonset disabled option is used for disabling or enabling the specified buttonset widget. This option accepts the boolean value.

Syntax: For initializing the buttonset with the disabled option.

$( ".selector" ).buttonset({
 disabled: true
});
  • Setting the disabled option as true value.

    $( ".selector" ).buttonset( "option", "disabled", true );
  •  

  • Getting the value of the disabled option.

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

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 disabled option.

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


Output:

jQuery UI Buttonset disabled Option

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


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!