📅 最后修改于: 2023-12-03 15:16:42.821000 🧑 作者: Mango
jQuery Mobile Selectmenu 小部件是一个常用的下拉菜单控件，可以让用户选择列表中的选项。在某些场景下，我们可能需要禁用某些选项，以避免用户误操作或不必要的选择。本文将介绍如何使用 jQuery Mobile Selectmenu 小部件禁用选项。
首先，我们需要创建一个 Selectmenu 控件，并在其中添加选项。对于需要禁用的选项，我们可以添加一个 disabled 属性。例如：
<label for="mySelect">选择一个选项：</label>
<select name="mySelect" id="mySelect" data-native-menu="false">
<option value="1">选项一</option>
<option value="2" disabled>选项二</option>
<option value="3">选项三</option>
</select>
接下来，我们需要使用 JavaScript 代码来禁用选项。可以通过设置选项的 disabled 属性为 true 来达到目的。例如：
$("#mySelect option[value='2']").prop("disabled", true).parent().selectmenu('refresh');
这里使用 jQuery 的选择器找到值为 2 的选项，并将其 disabled 属性设为 true。然后使用 selectmenu('refresh') 方法来刷新 Selectmenu 控件。
以下是一个完整的示例代码，可以直接复制到 HTML 文件中查看效果。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery Mobile Selectmenu 小部件禁用选项</title>
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>禁用 Selectmenu 选项</h1>
</div>
<div data-role="main" class="ui-content">
<label for="mySelect">选择一个选项：</label>
<select name="mySelect" id="mySelect" data-native-menu="false">
<option value="1">选项一</option>
<option value="2" disabled>选项二</option>
<option value="3">选项三</option>
</select>
<br>
<a href="#" class="ui-btn ui-corner-all ui-btn-inline" onclick="disableOption()">禁用选项二</a>
</div>
</div>
<script>
function disableOption() {
$("#mySelect option[value='2']").prop("disabled", true).parent().selectmenu('refresh');
}
</script>
</body>
</html>
通过本文的介绍，我们学习了如何使用 jQuery Mobile Selectmenu 小部件禁用选项。这对于某些需要限制用户选择的场景非常有用。希望本文对你有所帮助。