jquery禁止页面下拉滑动页面 js禁用下拉框

今天做了个页面，需求如下：将页面中的所有元素都设置为不可选中。

目录

读完本文您将了解到

1. 普通的文本输入框的禁用
2. layui单项选择框的禁用
3. layui的formSelects多选下拉框的禁用
4. layui开关的禁用
5. layui单选框的禁用
6. 时间选择器的禁用
7. 富文本编辑器的禁用

以下将一一列举这些元素如何禁用

1.文本输入框的禁用

禁用之前能在输入框输入文字，禁用之后就不能在文本框输入了，以下是效果图：

禁用代码如下

$("#id").attr("readOnly", "true");//文本框

2.layui单项选择框的禁用

禁用之前，能正常的单选；禁用之后，鼠标放上去会有个禁止的标识，表示单项选择器已被禁用。

禁用代码如下

$("#id").attr("disabled", "disabled");//下拉单选框

3.layui的formSelects多选下拉框

禁用之前能正常的多选，禁用之后，鼠标放上去会有禁止的标识，表示多选下拉框已被禁用。

Html的多选下拉框如下

<div class="layui-form-item">
	<label class="layui-form-label">网点名称</label>
		<div class="layui-input-inline" id="divStation">
			<select name="sex" id="" xm-select="selectId">
				<option value="1">1</option>
				<option value="2">2</option>
			</select>
		</div>
</div>

多选下拉框的禁用代码如下

formSelects.disabled('selectId');//formSelects下拉多选框禁用

4.layui开关

禁用之前能正常的开关，禁用之后鼠标放上去会显示禁止的标识，表示已经被禁用。

禁用代码如下

$("#id").attr("disabled", "disabled");//开关

5.layui单选框

禁用之前能进行单选，禁用之后鼠标放上去会有禁止的标识，说明单选框已经被禁用。

单选框禁用代码如下

$("#id").attr("disabled", "disabled");//单选框

6.时间选择器

禁用前，能使用时间选择器，禁用之后时间选择器无法调用，如图。

时间选择器禁用代码如下

$("#id").attr("disabled", "disabled");//时间

7.富文本编辑器

禁用之前能正常的编辑信息，禁用之后无法编辑信息，而且编辑器中所有的功能都呈现灰色，说明富文本编辑器已经被禁用。

富文本编辑器禁用代码如下

//实例化编辑器
var ue = UE.getEditor('editor');
//富文本编辑器的禁用
ue.ready(function () {
	ue.setDisabled();
});