js控制页面所有元素不可选中，包含（文本输入框，单项选择框，多选下拉框，开关，单选框，时间选择器，富文本编辑器）

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

目录

读完本文您将了解到

普通的文本输入框的禁用layui单项选择框的禁用layui的formSelects多选下拉框的禁用layui开关的禁用layui单选框的禁用时间选择器的禁用富文本编辑器的禁用

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

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(); });

欢迎关注本人公众号，以便查看最新动态哦~