Layui Switch开关动态控制禁用状态
作者:小满时间:2026-10-23 11:22:50浏览:554
本文介绍如何在Layui框架中通过JavaScript动态控制Switch开关的启用与禁用状态。当后台返回特定数据时,通过移除DOM元素的class属性来改变开关显示效果,并结合事件监听实现交互控制,确保未填写记录无法被启用。
Layui Switch动态禁用控制
Layui提供的switch组件用于展示当前状态,即启用或禁用。若某条记录的特定字段未填写,则该记录不应处于启用状态,且页面上需禁止对该记录进行任何操作。
具体实现代码如下:
// 页面状态栏事件监听
form.on('switch', function (data) {
var swithcData = data;
var id = data.value;// 获取要修改的ID
var state = this.checked ? '0' : '2';// 当前状态值
$.ajax({
url: '/adChannelConfig/editState',
data: {
"id": id,
"state": state
},
error: function (data) {
console.log(data);
layer.msg('数据异常,操作失败!');
},
// 修改失败,请填写对应的参数
success: function (data) {
if (data.data) {
layer.msg('操作成功!');
} else {
layer.msg(data.msg);
var em = $(swithcData.othis[0]);
swithcData.othis[0].classList.remove('layui-form-onswitch');
em.children('em').text('停用');
}
}
});
});
当后台返回添加失败的数据时,程序进入else分支。此时将当前DOM对象赋值给变量swithcData,并删除其class属性,以此控制Layui switch组件的页面显示效果。
在DOM结构中,需要点击索引为0的元素才能触发操作。由于数字类型的属性名无法通过点号语法获取,因此采用[0]的方式访问。
以上关于Layui中Switch开关动态控制启用状态的方法即为全部内容,供读者参考,欢迎支持本站。
作者最新文章
JS空字符串、null和undefined转数字的结果是什么
2026-11-05 14:49:16
CodePen、JSFiddle与StackBlitz:主流JS在线编辑器对比
2026-11-05 13:38:29
JS怎么将时间戳转换为“刚刚”、“几分钟前”等相对时间
2026-11-05 12:55:14
JavaScript将儒略日逆向还原为公历日期时间的实现方法
2026-11-04 23:51:05
能在我的世界手机版直接修改JS代码吗
2026-11-04 19:02:53
