layui下拉框禁用需手动触发form.render('select')重渲染,因原生disabled不作用于模拟的层;js动态禁用后必须立即调用该方法,且须在layui.use(['form'],...)回调内执行。

直接加 disabled 属性没用,Layui 的下拉框是模拟渲染的,原生禁用不会同步到 UI 层——必须手动触发重渲染。
设置 disabled 属性后必须调用 form.render('select')
Layui 把原生 <select></select> 隐藏了,用 <dl></dl> 模拟下拉面板;disabled 只锁住原生元素,不关闭模拟层。你看到“还能点开”,就是漏了这步。
- HTML 静态禁用:
<select name="status" disabled></select>,但页面加载后仍需在layui.use('form', ...)里补一次form.render('select') - JS 动态禁用:
$("#mySelect").prop("disabled", true)或.attr("disabled", "disabled"),紧接着必须form.render('select') - 只传
'select'类型参数,避免全量重绘(比如有 checkbox/radio 时,不传参会默认只刷它们)
form.render('select') 的执行时机和依赖
这个方法不是全局可用的,它依赖 layui.form 实例已就绪。
- 必须在
layui.use(['form'], function() { ... })回调内调用,否则报form is not defined - 如果
<select></select>是 AJAX 后动态插入的 DOM,得等html()或append()完成后再调form.render('select') - 多次调用无副作用,但没必要频繁触发;建议封装成函数,比如
toggleSelectDisabled($el, disabled)
禁用后点击仍弹出?检查两个地方
这是最常卡住人的点:表面禁用了,但点一下还是展开下拉菜单。
- 打开开发者工具,看原生
<select></select>是否真带disabled属性 - 再看它旁边的
.layui-form-select > dl是否还存在——存在就说明form.render('select')没执行或执行失败 - 想彻底移除点击响应(连点击都不触发),可手动删掉模拟层:
$("#mySelect").siblings(".layui-form-select").find("dl").remove(),但之后若要恢复,还得重新 render
事件监听里禁用,别忘了拦截当前触发
form.on('select(filter)', ...) 事件本身会在点击后立刻触发一次,哪怕你马上把 select 设为 disabled ——它不撤回这次点击。
- 在回调开头加判断:
if ($(this).is(':disabled')) return; - 否则会出现“点了停用项,却触发了后续逻辑”的情况
- 权限控制类场景尤其要注意这点,不然可能绕过前端校验
真正容易被忽略的是:禁用逻辑写在事件回调里时,UI 状态和事件执行是不同步的;disabled 是“从下一次交互开始生效”,不是“立刻冻结当前操作”。











