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 Tutorial jQuery is a lightweight JavaScript library that simplifies the HTML DOM manipulating, event handling, and creating dynamic web experiences. The main purpose of jQuery is to simplify the usage of JavaScript on websites. jQuery achieves this by providing concise, single-line methods for complex JavaSc
8 min read
Getting Started with jQuery jQuery is a fast lightweight, and feature-rich JavaScript library that simplifies many common tasks in web development. It was created by John Resign and first released in 2006. It makes it easier to manipulate HTML documents, handle events, create animations, and interact with DOM(Document Object M
4 min read
jQuery Introduction jQuery is an open-source JavaScript library that simplifies the interactions between an HTML/CSS document, or more precisely the Document Object Model (DOM). jQuery simplifies HTML document traversing and manipulation, browser event handling, DOM animations, Ajax interactions, and cross-browser Java
7 min read
jQuery Syntax The jQuery syntax is essential for leveraging its full potential in your web projects. It is used to select elements in HTML and perform actions on those elements.jQuery Syntax$(selector).action()Where - $ - It the the shorthand for jQuery function.(selector) - It defines the HTML element that you w
2 min read
jQuery CDN A Content Delivery Network (CDN) is a system of distributed servers that deliver web content to users based on their geographic location. Including the jQuery CDN in your project can improve the performance, enhance reliability, and simplify maintenance.What is a jQuery CDN?A jQuery CDN is a service
4 min read
jQuery Selectors
JQuery SelectorsWhat is a jQuery Selector?jQuery selectors are functions that allow you to target and select HTML elements in the DOM based on element names, IDs, classes, attributes, and more, facilitating manipulation and interaction. Syntax: $(" ")Note: jQuery selector starts with the dollar sign $, and you encl
5 min read
jQuery * SelectorThe jQuery * selector selects all the elements in the document, including HTML, body, and head. If the * selector is used together with another element then it selects all child elements within the element used. Syntax: $("*")Parameters: *: This parameter is used to select all elements.Example 1: Se
1 min read
jQuery #id SelectorjQuery is an open-source JavaScript library that simplifies the interactions between an HTML/CSS document, or more precisely the Document Object Model (DOM), and JavaScript. Elaborating on the terms, it simplifies HTML document traversing and manipulation, browser event handling, DOM animations, Aja
1 min read
jQuery .class SelectorThe jQuery .class selector specifies the class for an element to be selected. It should not begin with a number. It gives styling to several HTML elements. Syntax: $(".class") Parameter: class: This parameter is required to specify the class of the elements to be selected.Example 1: In this example,
1 min read
jQuery Events
jQuery Effects
jQuery HTML/CSS
jQuery Traversing