📅 最后修改于: 2023-12-03 14:51:56.918000 🧑 作者: Mango
在 jQuery Mobile 中，Fieldcontain 是一个布局容器，可将表单元素包装在一个方框中，以便以更好的方式呈现。而开关切换器是一种表单元素，可以滑动切换开关状态。
有时候，我们需要禁用这个开关切换器，以防止用户更改其状态。下面是使用 jQuery Mobile 创建禁用 Fieldcontain 翻转切换开关的步骤：
首先，我们需要创建一个 Fieldcontain 容器，并将开关切换器包含在其中：
<div data-role="fieldcontain">
<label for="flip-1">禁用开关切换器：</label>
<select name="flip-1" id="flip-1" data-role="slider">
<option value="off">否</option>
<option value="on">是</option>
</select>
</div>
在上面的代码中，我们使用了 select 元素，并设置了 data-role="slider"，这可以将其转换为开关切换器。同时，我们给这个开关切换器添加了一个 ID，以便在后面的步骤中使用它。
接下来，我们需要在 JavaScript 代码中禁用这个开关切换器。为此，我们可以通过选择器获取该元素，并设置其 disabled 属性为 true。以下是源代码：
$(document).ready(function() {
$("#flip-1").prop("disabled", true);
});
在上面的代码中，我们使用了 $() 函数来获取 ID 为 flip-1 的元素，并使用 prop() 方法来将其 disabled 属性设置为 true。
注意，我们将代码包装在 $(document).ready() 函数中，以确保代码在文档就绪后执行。
最后，我们需要在 HTML 代码中添加 jQuery Mobile 库和上面的 JavaScript 代码：
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<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>
<script>
$(document).ready(function() {
$("#flip-1").prop("disabled", true);
});
</script>
</head>
<body>
<div data-role="page">
<div data-role="main" class="ui-content">
<div data-role="fieldcontain">
<label for="flip-1">禁用开关切换器：</label>
<select name="flip-1" id="flip-1" data-role="slider">
<option value="off">否</option>
<option value="on">是</option>
</select>
</div>
</div>
</div>
</body>
</html>
在上面的代码中，我们添加了 jQuery Mobile 库和我们之前编写的 JavaScript 代码。我们还创建了一个基本的 HTML 页面，并在其中包含我们之前编写的 Fieldcontain 容器和开关切换器。
要在自己的项目中应用这些代码，请按照以下步骤进行操作：
将 HTML 代码添加到您的网站中。
添加 jQuery 和 jQuery Mobile 库到您的网站中，可以从官方网站下载或使用 CDN。
将 JavaScript 代码添加到您的网站中。
打开您的网站并测试开关切换器是否已被禁用。
现在，您已经知道如何使用 jQuery Mobile 创建禁用 Fieldcontain 翻转切换开关了。