Skip to content
Related Articles

Related Articles

jQuery UI | Controlgroup Widget
  • Last Updated : 20 Dec, 2019

A controlgroup is used to group various input widgets like checkbox, button, etc. The control group helps to apply common properties to all the elements of a form. For example, if the user declares that the present address is the same as a permanent address then we can disable the section used for entering the permanent address. Controlgroup works by choosing the appropriate descendants and applying their respective widgets. If the widgets already exist, their refresh() method is called. The controlgroup can be enabled and disabled, which enable and disable all contained widgets.

Syntax:

filter_none

edit
close

play_arrow

link
brightness_4
code

$( ".my_games_control_group" ).controlgroup({
});

chevron_right


Attributes:

  • destroy: It is used to remove the controlgroup function from your code.
  • disable: Used to disable the controlgroup.
  • enable: Used to enable the controlgroup if it was disabled previously.
  • instance: Returns the instance of the current object.
  • option: Returns the value currently associated with the specified option name.
  • refresh: Used to process any widget that was added or removed.
  • widget: Returns an object containing the entire controlgroup.

Let’s create a simple, basic controlgroup having a radio button, a drop-down, a checkbox, a label, and a button. To do this we specify the widgets inside a class and mention the class name inside the javascript code inside the script tag.

Example 1:



filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <link href=
          rel='stylesheet'>
</head>
  
<body>
<center>
  <h1 style="color:green">GeeksforGeeks</h1>
    <div class="my_games_control_group">
  
        <label for="radio_1">Men</label>
        <input type="radio" name="type" id="radio_1">
        <label for="radio_2">Women</label>
        <input type="radio" name="type" id="radio_2">
        <select>
            <option>Cricket</option>
            <option>Hockey</option>
            <option>Tennis</option>
            <option>Football</option>
        </select>
        <label for="official">Official</label>
        <input type="checkbox"
               name="official" 
               id="official">
        <button id="apply">Apply</button>
    </div>
  
    <script src=
  </script>
    <script src=
  </script>
  
    <script>
        $(document).ready(function() {
              
            $(".my_games_control_group").controlgroup({});
              
        })
    </script>
  </center>
</body>
  
</html>

chevron_right


Output:

Changing the direction/orientation of the Controlgroup: The orientation of the controlgroup can be change by specifying it in the “Direction” option. By default it is set to horizontal, it can be used to change the orientation to vertical.

Example 2:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <link href=
          rel='stylesheet'>
</head>
  
<body>
    <center>
        <h1 style="color:green">GeeksforGeeks</h1>
        <div class="my_games_control_group">
  
            <label for="radio_1">Men</label>
            <input type="radio" name="type" id="radio_1">
            <label for="radio_2">Women</label>
            <input type="radio" name="type" id="radio_2">
            <select>
                <option>Cricket</option>
                <option>Hockey</option>
                <option>Tennis</option>
                <option>Football</option>
            </select>
            <label for="official">Official</label>
            <input type="checkbox" name="official" id="official">
            <button id="apply">Apply</button>
        </div>
  
        <script src=
      </script>
        <script src=
      </script>
  
        <script>
            $(document).ready(function() {
  
                $(".my_games_control_group").controlgroup({
                    "direction": "vertical"
                });
  
            })
        </script>
     </center>
</body>
  
</html>

chevron_right


Output:

Enabling/Disabling Controlgroup: The disabled option set to true for disabling the control group. By default the value is false. In the below code, added another controlgroup with two radiobuttons which will enable or disable the main controlgroup. This also displays the code to disable the controlgroup.

Example 3:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <link href=
          rel='stylesheet'>
</head>
  
<body>
    <center>
        <h1 style="color:green">GeeksforGeeks</h1>
        <h2>disabled option true or false</h2>
        <div class="my_games_control_group">
  
            <label for="radio_1">Men</label>
            <input type="radio" name="type" id="radio_1">
            <label for="radio_2">Women</label>
            <input type="radio" name="type" id="radio_2">
            <select>
                <option>Cricket</option>
                <option>Hockey</option>
                <option>Tennis</option>
                <option>Football</option>
            </select>
            <label for="official">Official</label>
            <input type="checkbox" name="official" id="official">
            <button id="apply">Apply</button>
        </div>
        <br><br><br>
          
        <div id=display>Display</div>
        <br> Set the Disabled option
        <div class='radio_selection'>
            <label for=sel_radio_1>True</label>
            <input type='radio'
                   name='r_disabled' 
                   id='sel_radio_1' 
                   value=true>
            <label for=sel_radio_2>False</label>
            <input type='radio' 
                   name='r_disabled'
                   id='sel_radio_2' 
                   value=false 
                   checked>
        </div>
  
        <script src=
      </script>
        <script src=
      </script>
  
        <script>
            $(document).ready(function() {
  
                $(".my_games_control_group, .radio_selection").controlgroup()
  
                $("input:radio[name=r_disabled]").click(function() {
                    var selection = ($(this).val() == 'true');
                    $(".my_games_control_group").controlgroup(
                      "option", "disabled", selection);
                    $('#display').html(
" $( \".my_games_control_group\" ).controlgroup( \"option\", \"disabled\", "
                      + selection + ")");
                })
  
            })
        </script>
    </center>
</body>
  
</html>

chevron_right


Output:

Destroying Controlgroup: To destroy the controlgroup use the destroy method. This method destroys the controlgroup and completely removes its functionality and returns all the widgets contained to its pre-init state. The destroying method used in the below code by a click event of a button, there is another button which reloads the page to try again.

Example 4:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <link href=
          rel='stylesheet'>
</head>
  
<body>
    <center>
        <h1 style="color:green">GeeksforGeeks</h1>
        <h2>Destroy methods</h2>
        <div class="my_games_control_group">
  
            <label for="radio_1">Men</label>
            <input type="radio" name="type" id="radio_1">
            <label for="radio_2">Women</label>
            <input type="radio" name="type" id="radio_2">
            <select>
                <option>Cricket</option>
                <option>Hockey</option>
                <option>Tennis</option>
                <option>Football</option>
            </select>
            <label for="official">Official</label>
            <input type="checkbox" name="official" id="official">
            <button id="apply">Apply</button>
        </div>
  
        <button id=my_button>Destroy</button>
        <a href=''>
            <button type='button'>Try again : Refresh</button>
        </a>
  
        <script src=
      </script>
        <script src=
      </script>
  
        <script>
            $(document).ready(function() {
  
                $(".my_games_control_group").controlgroup({})
  
                $('#my_button').click(function() {
                    $(".my_games_control_group").controlgroup("destroy");
                })
            })
        </script>
    </center>
</body>
  
</html>

chevron_right


Output:

My Personal Notes arrow_drop_up
Recommended Articles
Page :