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 casillas de verificación, botones, etc. El grupo de control ayuda a aplicar propiedades comunes a todos los elementos de un formulario.
La opción deshabilitado del grupo de control de jQuery UI se usa para deshabilitar el widget del grupo de control, si su valor se establece en verdadero.
Sintaxis:
Inicialice el grupo de control con la opción deshabilitada especificada:
$( ".selector" ).controlgroup({
disabled: true
});
Obtenga o configure la opción deshabilitada, después de la inicialización:
// Getter
var disabled = $( ".selector" )
.controlgroup( "option", "disabled" );
// Setter
$( ".selector" ).controlgroup(
"option", "disabled", true );
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 describe los usos de la opción deshabilitada 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 () {
$("#GFG").controlgroup();
$("#GFG").controlgroup( "option", "disabled", true );
});
</script>
</head>
<body>
<center>
<h1 style="color:green">
GeeksforGeeks
</h1>
<h3>jQuery UI Controlgroup disabled Option</h3>
<div id="GFG">
<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>
</center>
</body>
</html>
Producción:
Referencia: https://api.jqueryui.com/controlgroup/#option-disabled