Open In App

jQuery UI Buttonset disabled Option

Improve
Improve
Like Article
Like
Save
Share
Report

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



Last Updated : 10 Jan, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads