📅 最后修改于: 2023-12-03 15:16:44.422000 🧑 作者: Mango
jQuery UI是基于jQuery的一套UI组件框架，其中包含了很多实用的UI组件，其中之一就是Checkboxradio Widget。
Checkboxradio Widget是将常规复选框和单选框转换为更美观的控件，而且它非常易于使用。然而，在一些特定情况下，我们需要禁用某些选项，本文将介绍如何使用jQuery UI Checkboxradio Widget禁用选项。
使用Checkboxradio Widget禁用选项需要先设置选项的状态为禁用状态，可通过以下代码实现：
$("#id").checkboxradio("option", "disabled", true);
其中，#id为需要禁用的选项的id，disabled为选项禁用状态。
让我们看一个简单示例，实现禁用Checkboxradio的选项。
HTML代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>jQuery UI Checkboxradio Widget 禁用选项</title>
<link rel="stylesheet" href="https://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>
</head>
<body>
<form>
<fieldset>
<legend>禁用选项示例</legend>
<label for="radio1">单选框1</label>
<input type="radio" name="radio" id="radio1">
<label for="radio2">单选框2</label>
<input type="radio" name="radio" id="radio2">
<label for="radio3">单选框3</label>
<input type="radio" name="radio" id="radio3">
<br>
<label for="checkbox1">复选框1</label>
<input type="checkbox" name="checkbox" id="checkbox1">
<label for="checkbox2">复选框2</label>
<input type="checkbox" name="checkbox" id="checkbox2">
<label for="checkbox3">复选框3</label>
<input type="checkbox" name="checkbox" id="checkbox3">
</fieldset>
</form>
<script>
$(function () {
//禁用复选框1
$("#checkbox1").checkboxradio("option", "disabled", true);
});
</script>
</body>
</html>
运行以上代码，将看到复选框1被禁用。
通过简单的代码，我们可以轻松地禁用Checkboxradio Widget的选项，让用户无法选择。当然，如需更多自定义，jQuery UI官方文档中也包含了丰富的参数和事件，可以灵活地满足不同的需求。