Layui select 动态禁用 option 需先设置原生 option 的 disabled 属性，再调用 layui.form.render('select')；仅设 lay-data 或不传参数将无效，且需手动拦截键盘选中禁用项。
layui select 如何用 JavaScript 动态禁用某个 option
不能直接对 option 元素设 disabled 属性再重渲染 —— layui 的 select 是基于原始 select 生成的模拟下拉，dom 操作后必须同步调用 form.render()，否则界面不更新。
- 原始
select的option可以加disabled="disabled"，但 Layui 渲染后不会自动读取这个状态 - 必须先改原生
option的disabled属性，再调用form.render('select')（注意传参） - 如果没传类型参数（如
'select'），form.render()默认只刷新 checkbox/radio，下拉框不会更新
示例：禁用 value 为 "2" 的选项
document.querySelector('select[name="city"] option[value="2"]').disabled = true;
layui.form.render('select', 'your-form-filter');
用 lay-data 属性控制禁用时的常见误区
Layui 不识别 lay-data 里的 disabled 字段，这个属性只用于自定义数据传递，和 UI 禁用无关。
-
<option value="2" lay-data='{"disabled":true}'>上海</option>→ 完全无效 - 禁用只能靠原生
disabled属性 +form.render('select') - 如果用了模板引擎（如 Thymeleaf、Vue）预渲染，确保服务端或初始化脚本里已正确设置
disabled，否则首次渲染就漏掉
动态禁用后用户仍能通过键盘操作选中？
是的。Layui 的模拟下拉默认不限制键盘导航（↑↓键）跳过被禁用项，这是它没完全遵循 ARIA 规范的表现。
- 被设了
disabled的option在鼠标点击时灰显且不可点，但键盘焦点仍可停在上面 - 按回车会触发选择，导致“禁用失效”——本质是 Layui 没监听
disabled状态做键盘拦截 - 临时解法：在
change事件里手动校验，若选中的是禁用项，立刻select.value = ''并再次form.render('select')
兼容性与性能注意点
频繁调用 form.render('select') 会触发整个表单重绘，尤其在循环中禁用多个 option 时容易卡顿。
- 批量操作建议：先集中修改所有目标
option.disabled，最后只调一次form.render('select') - Layui 2.8+ 支持
form.render('select', id)按 ID 精准刷新，比全局刷新更轻量 - IE11 下
querySelector对option[value="..."]支持不稳定，建议 fallback 到遍历select.options
最麻烦的地方其实是：禁用逻辑得同时管住鼠标、键盘、初始渲染、后续 JS 修改 —— 少一个环节，用户就能绕过去。
