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:

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

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:

<!DOCTYPE html> 
<html> 
  
<head> 
    <link href= 
'https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/ui-lightness/jquery-ui.css'
          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= 
"https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"> 
  </script> 
    <script src= 
"https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"> 
  </script> 
  
    <script> 
        $(document).ready(function() { 
              
            $(".my_games_control_group").controlgroup({}); 
              
        }) 
    </script> 
  </center> 
</body> 
  
</html> 

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:

<!DOCTYPE html> 
<html> 
  
<head> 
    <link href= 
'https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/ui-lightness/jquery-ui.css'
          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= 
"https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"> 
      </script> 
        <script src= 
"https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"> 
      </script> 
  
        <script> 
            $(document).ready(function() { 
  
                $(".my_games_control_group").controlgroup({ 
                    "direction": "vertical" 
                }); 
  
            }) 
        </script> 
     </center> 
</body> 
  
</html> 

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:

<!DOCTYPE html> 
<html> 
  
<head> 
    <link href= 
'https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/ui-lightness/jquery-ui.css' 
          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= 
"https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"> 
      </script> 
        <script src= 
"https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"> 
      </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> 

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:

<!DOCTYPE html> 
<html> 
  
<head> 
    <link href= 
'https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/ui-lightness/jquery-ui.css'
          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= 
"https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"> 
      </script> 
        <script src= 
"https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"> 
      </script> 
  
        <script> 
            $(document).ready(function() { 
  
                $(".my_games_control_group").controlgroup({}) 
  
                $('#my_button').click(function() { 
                    $(".my_games_control_group").controlgroup("destroy"); 
                }) 
            }) 
        </script> 
    </center> 
</body> 
  
</html> 

Output:

How to create controlgroup widget using jQuery-ui ?

mayeshmohapatra

Improve

Article Tags :

jQuery UI | Controlgroup Widget

Similar Reads

Thank You!

What kind of Experience do you want to share?