📅 最后修改于: 2023-12-03 15:02:10.687000 🧑 作者: Mango
jQuery Mobile 是基于 jQuery 框架开发的一套移动端UI框架，为开发应用提供了许多交互组件和工具，包括滑块组件 Slider。Slider组件为用户提供了一个可拖动的滑块按钮，可以在不同的数值之间滑动，通常用于表单控件中。
在使用 Slider 组件时，有时需要在特定条件下启用或禁用它，这时就可以使用 enable() 方法来控制。
$(selector).slider('enable');
该方法没有参数。
该方法没有返回值。
下面的示例演示了如何使用 enable() 方法激活和禁用 Slider 组件：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery Mobile Slider enable() 方法</title>
<link rel="stylesheet" href="https://cdn.bootcss.com/jquery-mobile/1.4.5/jquery.mobile.min.css">
<script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/jquery-mobile/1.4.5/jquery.mobile.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>jQuery Mobile Slider enable() 方法</h1>
</div>
<div data-role="content">
<form>
<label for="slider-1">Slider 输入:</label>
<input type="range" name="slider-1" id="slider-1" value="0" min="0" max="100">
<button id="enable-btn">启用 Slider</button>
<button id="disable-btn" disabled="disabled">禁用 Slider</button>
</form>
</div>
</div>
<script>
$(document).on('pagecreate', function() {
$('#enable-btn').click(function() {
$('#slider-1').slider('enable');
$('#enable-btn').attr('disabled', 'disabled');
$('#disable-btn').removeAttr('disabled');
});
$('#disable-btn').click(function() {
$('#slider-1').slider('disable');
$('#disable-btn').attr('disabled', 'disabled');
$('#enable-btn').removeAttr('disabled');
});
});
</script>
</body>
</html>
当用户打开页面时，Slider 组件被禁用，相应的按钮也为灰色不可用状态。当用户点击“启用 Slider”按钮时，enable() 方法被调用，Slider 组件被启用，对应的按钮也可以使用。当点击“禁用 Slider”按钮时，disable() 方法被调用，Slider 组件被禁用。