如何让单选框不能被tab键选中_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的多选下拉框如下

网点名称

1 2

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

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

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