今天做了个页面,需求如下:将页面中的所有元素都设置为不可选中。
目录
读完本文您将了解到
- 普通的文本输入框的禁用
- 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();
});
欢迎关注本人公众号,以便查看最新动态哦~