select元素不支持readonly属性,浏览器原生不识别该语义;真正禁用交互需用disabled并配合隐藏域或移除disabled提交,或改用dropdown模拟实现视觉只读与值提交兼顾。

select 元素本身不支持 readonly 属性,硬加上去无效。 你看到的“加了 readonly 没反应”,不是 Layui 的问题,是浏览器根本不认这个属性——HTML 规范里,select、checkbox、radio 都没有 readonly 语义。
为什么 select 不能用 readonly
浏览器只对 input(text、number 等)和 textarea 原生支持 readonly。对 select 设置 readonly="readonly" 或 JS 赋值 elem.readOnly = true,DOM 属性会存在,但 UI 和交互完全不受影响:点击照样弹出菜单,键盘照样可操作,Layui 渲染后也视而不见。
常见错误现象:
- 在 HTML 里写 <select readonly><option>A</option></select>,结果下拉依然能点开
- JS 执行 document.querySelector('select').readOnly = true,控制台能看到属性变了,但用户行为毫无变化
想“只读展示”,只能用 disabled + 补偿逻辑
真正能阻止交互的只有 disabled,但它带来副作用:值不提交、校验跳过、样式变灰。要让它“看起来只读但值可用”,得手动绕过这些限制:
- 静态写法:
<select name="status" disabled><option value="1">启用</option></select> - 提交前移除
disabled:form.on('submit', function(data){ $('select[name="status"]').prop('disabled', false); }); - 或改用隐藏域同步值:
<select name="status" disabled></select><input type="hidden" name="status" value="1">,确保后端收到值 - Layui 校验时注意:
required在disabled元素上不会触发,别指望前端拦住空提交
替代方案:放弃原生 select,用按钮 + dropdown 模拟
如果既要“点击即响应”又要“视觉只读”,原生 select 就是死胡同。Layui 提供更可控的替代:
- 用
layui.dropdown.render()绑定按钮,菜单项点击直接执行 JS,不依赖表单提交逻辑 - 菜单内容用
<dl><dd></dd></dl>结构,配合lay-value存值,完全脱离selectDOM 限制 - 禁用自动关闭:
autoClose: false,避免点击后菜单闪退 - 需要回显值?用普通
<input readonly>显示文字,背后用隐藏域存真实值
最易被忽略的点:不要试图给 select 加 readonly 并期待它生效——这既不符合规范,也不兼容任何主流浏览器。要么接受 disabled 的副作用并做补偿,要么换控件。后者在复杂业务中反而更省调试时间。











