禁用 select 控件必须同时设置 disabled 属性并调用 form.render('select'),否则 ui 仍可点击、键盘仍能操作;动态禁用/启用需用 .prop() 修改并重渲染;禁用后须手动拦截 keydown 并在事件回调加 disabled 守卫。

禁用整个 select 控件,必须加 disabled 属性 + 调 form.render('select'),否则 UI 仍可点击、键盘仍能操作。
HTML 初始化时禁用,别漏掉 render
直接在 <select></select> 标签写 disabled 是最简方式,但 Layui 渲染后会隐藏原生下拉框、用伪 DOM 模拟面板——这个模拟层不自动响应 disabled 属性:
-
<select name="status" disabled><option>启用</option></select>✅ 原生属性正确 - 但不调
form.render('select')→ 点击仍弹出下拉菜单、↑↓键仍可聚焦 → ❌ 实际未禁用 - 必须在
layui.use('form', function(){...})回调里执行form.render('select'),否则报form is not defined
JS 动态禁用/启用 select,别只改属性不重绘
运行时根据权限或表单联动开关下拉框,常见于 AJAX 加载后控制:
- 禁用:
$("#mySelect").prop("disabled", true)+form.render('select') - 启用:
$("#mySelect").prop("disabled", false)+form.render('select') - 错误做法:只调
.attr("disabled", "disabled")不传布尔值,或漏掉form.render('select') - 性能注意:若页面有多个 select,用
form.render('select')(传类型)比form.render()(全量)更轻量
禁用后键盘还能选中?得手动拦截 keydown
Layui 没校验 :disabled 状态做键盘导航过滤。即使 UI 灰了,用户按 ↑↓ 键仍能停在禁用项上,回车照样触发 form.on('select()'):
- 必须在事件回调开头加守卫:
if ($(this.elem).is(':disabled')) return; - 额外加固:绑定
keydown并阻止默认行为:$(this.elem).on('keydown', e => { if ($(this.elem).is(':disabled')) e.preventDefault(); }); - 注意:这个监听要在
form.render('select')之后加,否则this.elem对应的 DOM 可能还没就绪
只禁用某一个 option,不是设样式而是改原生节点
想让“上海”选项变灰不可点,不是加 layui-disabled 类或写 lay-data='{"disabled":true}':
- 必须操作原生
<option></option>:document.querySelector('select[name="city"] option[value="sh"]').disabled = true - 然后立刻调
form.render('select', 'your-form-filter')(第二个参数是 form 的lay-filter值) - IE11 下
querySelector可能失效,稳妥写法是遍历this.elem.options - 批量禁用多个 option 时,先统一设
.disabled = true,最后只调一次form.render('select'),避免重复重绘卡顿
真正容易被忽略的是:禁用逻辑依赖后端状态时,前端改了 disabled,但没同步更新本地数据源;下次翻页或刷新,禁用就丢了。别只靠一次 DOM 操作就想“一劳永逸”。











