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:
javascript
$( ".my_games_control_group" ).controlgroup({
});
- 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:
html
<!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>
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:
html
<!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>
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:
html
<!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>
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:
html
<!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>
Similar Reads
jQuery Mobile Controlgroup Widget mini Option jQuery Mobile is a web-based technology used to make responsive content that can be accessed on all smartphones, tablets, and desktops. In this article, we will be using jQuery Mobile Controlgroup Widget mini Option to set to true to display a more compact version of the controlgroup that uses less
1 min read
jQuery UI Controlgroup Widget Complete Reference The jQuery UI Controlgroup widget is used to add themeable input to the website. There are lots of options, methods and events are available in this widget, all of them are listed and categorized below.jQuery UI Controlgroup Widget Options: jQuery UI Controlgroup classes OptionjQuery UI Controlgroup
1 min read
jQuery Mobile Controlgroup Widget theme Option jQuery Mobile is a web-based technology used to make responsive content that can be accessed on all smartphones, tablets, and desktops. In this article, we will be using the jQuery Mobile Controlgroup Widget theme Option to set the color option of Controlgroup. It accepts a single character from "a
1 min read
jQuery Mobile Controlgroup Widget defaults Option jQuery Mobile is a web-based technology used to make responsive content that can be accessed on all smartphones, tablets, and desktops. In this article, we will be using jQuery Mobile Controlgroup Widget defaults Option to set its option to true that indicates that other widgets options and its defa
1 min read
jQuery UI Controlgroup option() Method jQuery UI consists of GUI widgets, visual effects, and themes implemented using jQuery, CSS, and HTML. jQuery UI is great for building UI interfaces for the webpages. A controlgroup is used to group various input widgets like checkbox, button, etc. The control group helps to apply common properties
2 min read