jQuery UI consta de widgets GUI, efectos visuales y temas implementados mediante jQuery , CSS y HTML . jQuery UI es excelente para crear interfaces de interfaz de usuario para las páginas web. Un grupo de control se usa para agrupar varios widgets de entrada como casilla de verificación , botón , etc. El grupo de control ayuda a aplicar propiedades comunes a todos los elementos de un formulario.
El método de la opción (optionName) del grupo de control de jQuery UI devuelve el valor actualmente asociado con el optionName especificado.
Sintaxis:
var isDisabled = $( ".selector" )
.controlgroup( "option", "disabled" );
Parámetros: Acepta un único parámetro optionName que contiene el nombre de la opción.
Valor devuelto: Devuelve la opción actualmente asociada con el optionName especificado .
Enlace CDN: Primero, agregue los scripts jQuery UI necesarios para su proyecto.
<enlace rel=”hoja de estilo” 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>
Ejemplo: Este ejemplo demuestra el método de la opción (optionName) del grupo de control de jQuery UI .
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href=
"//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src=
"https://code.jquery.com/jquery-1.12.4.js">
</script>
<script src=
"https://code.jquery.com/ui/1.12.1/jquery-ui.js">
</script>
<script>
$(document).ready(function () {
$("#divID").controlgroup();
$("#divID").controlgroup("disable");
$("#btn").on('click', function () {
var isDisable = $("#divID")
.controlgroup( "option", "disabled" );
console.log(isDisable);
});
});
</script>
</head>
<body>
<center>
<h1 style="color:green">
GeeksforGeeks
</h1>
<h3>jQuery UI Controlgroup option(optionName) Method</h3>
<div id="divID">
<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">
</div>
<br>
<input type="button" id="btn"
style="padding:5px 15px; margin-top:50px;"
value="option() Method">
</center>
</body>
</html>
Producción:
Referencia: https://api.jqueryui.com/controlgroup/#method-option