📅 最后修改于: 2023-12-03 15:16:46.447000 🧑 作者: Mango
jQuery UI 选择菜单是一个常用的UI组件，可以让用户从预定义的选项集合中选择值。有时候我们需要禁用某些选项，让用户不能选择这些选项。下面介绍如何使用jQuery UI来禁用选择菜单中的选项。
要禁用选择菜单中的选项，需要引入jQuery和jQuery UI库。首先，创建一个选择菜单:
<select id="menu">
<option value="1">选项1</option>
<option value="2">选项2</option>
<option value="3">选项3</option>
<option value="4">选项4</option>
</select>
然后，使用jQuery来禁用相应的选项。例如，要禁用选项2和选项4:
$("#menu").children("option[value='2'], option[value='4']").prop("disabled", true);
这里使用了jQuery选择器来选择要禁用的选项，然后使用prop()方法设置disabled属性为true。要启用一个选项，可以将disabled属性设置为false。
下面是一个完整的例子，演示如何使用jQuery UI禁用选择菜单中的选项。点击运行按钮预览代码效果。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery UI 选择菜单禁用选项</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="//code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
</head>
<body>
<h1>jQuery UI 选择菜单禁用选项</h1>
<p>选择菜单:</p>
<select id="menu">
<option value="1">选项1</option>
<option value="2">选项2</option>
<option value="3">选项3</option>
<option value="4">选项4</option>
</select>
<script>
$(function() {
// 禁用选项2和选项4
$("#menu").children("option[value='2'], option[value='4']").prop("disabled", true);
});
</script>
</body>
</html>
代码片段（markdown格式）：
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery UI 选择菜单禁用选项</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="//code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
</head>
<body>
<h1>jQuery UI 选择菜单禁用选项</h1>
<p>选择菜单:</p>
<select id="menu">
<option value="1">选项1</option>
<option value="2">选项2</option>
<option value="3">选项3</option>
<option value="4">选项4</option>
</select>
<script>
$(function() {
// 禁用选项2和选项4
$("#menu").children("option[value='2'], option[value='4']").prop("disabled", true);
});
</script>
</body>
</html>
$("#menu").children("option[value='2'], option[value='4']").prop("disabled", true);