layui select 不支持 readonly,需用 disabled 配合 form.render('select') 实现禁用;静态禁用应在 html 中加 disabled 并在 layui.use 回调中 render;动态切换须 attr/removeattr 后立即 render;若需值提交的“只读”,须拦截 change 事件并手动恢复值。

layui select 没有 readonly,只能用 disabled + render
select 元素原生就不支持 readonly 属性,Layui 也没提供封装。所谓“只读”,实际只有两种路径:一是视觉上禁用且值可提交(需手动处理),二是彻底禁用(值不参与提交)。Layui 的 select 渲染后是模拟 UI(.layui-form-select),直接写 disabled 属性只是作用于隐藏的原生 select,必须配合 form.render('select') 才能让下拉面板真正不可点。
静态禁用:HTML 写 disabled + 初始化时 render
后台返回字段不可编辑时,最稳妥的做法是在 HTML 里直接加 disabled,并在 layui.use('form') 回调中调一次 form.render('select'):
<select name="category" disabled><option value="1">A</option></select>- 确保
form.render('select')在 form 模块加载完成后执行,否则 UI 不同步 - 如果用了
lay-filter,推荐传第二个参数:form.render('select', 'myFilter'),避免重绘整个表单
动态切换:attr/removeAttr + 紧跟 render
权限控制、联动场景下 JS 控制开关,关键点是顺序不能错:
- 禁用:
$('#mySelect').attr('disabled', 'disabled')→ 然后立即form.render('select') - 启用:
$('#mySelect').removeAttr('disabled')→ 再次form.render('select') - 别用
.prop('disabled', true),某些版本 jQuery 下它不触发 DOM 属性变更,Layui 读不到 - 页面有多个 select 时,传
'select'比传true更轻量,避免全量重绘
想“只读但值能提交”?得绕开 disabled
如果业务要求用户能看到、能复制、值要进表单,但不能改选项——disabled 不行,因为它会丢值。这时只能靠拦截:
- 监听
change事件,检测到修改就$('#mySelect').val(oldVal).trigger('change')并提示 - 或者用
onfocus="this.defaultIndex=this.selectedIndex"+onchange="this.selectedIndex=this.defaultIndex"(兼容性好,但移动端可能失效) - 注意:这种“伪只读”没有视觉禁用效果,需自行加
class="layui-disabled"和 CSS 控制背景色与指针
真正容易被忽略的是:render 必须在 layui.use 回调里执行,且不能漏掉;动态操作后没 render,DOM 上 disabled 属性虽存在,但下拉面板照样弹出——因为 Layui 的 UI 层根本没刷新。











