选中某个选项后立即禁用整个下拉框，这个功能在实际项目中非常常见。但直接套用disabled属性往往会出现UI不同步、键盘操作仍能绕过关闭、仅禁用个别选项等细节问题。下面就把这三个典型场景的坑点和正确解法拆开讲清楚。
很多初学者以为选中后禁用select就是设置一个disabled属性的事，实际操作才发现：UI根本没反应，或者键盘上下键依然能切换选项。Layui的模拟下拉层和原生状态是两套体系，必须手动同步才能生效。
选中后禁用当前select元素本身
最直接的需求：用户点击某项后，整个下拉框立刻变灰不再可操作。关键不是锁定选项，而是锁定控件——select一旦被设为disabled，所有交互（鼠标、键盘、触屏）都会被阻断。
- 禁用逻辑必须写在
form.on('select(filterName)')回调里，不能放在事件外部——否则首次渲染就会把控件直接锁死 - 设置
disabled后要立即调用form.render('select')，否则Layui的模拟下拉层不会同步状态，鼠标依然能点开 - 如果这个
select还参与表单提交，需要注意disabled的字段默认不会上传。需要值时建议改用readonly配合隐藏域，或者在提交前临时移除disabled
来看一段正确代码：
layui.use('form', function(){ var form = layui.form; form.on('select(status)', function(data){ // 锁定当前 select $(this.elem).attr('disabled', 'disabled'); form.render('select'); });});
禁用后仍能用键盘上下键切换？
这是Layui一个典型的“半拉子”行为：鼠标点击被禁用了，但按 ↑↓ 键依然能聚焦到已禁用的 option 上，回车甚至能触发选择——因为Layui没有在 keydown 事件里校验 disabled 状态。
- 需要手动在
form.on('select()')之后额外绑定一个keydown监听：如果当前元素已禁用，直接执行e.preventDefault()阻止默认行为 - 更保险的做法是在
change或select事件的头部加一个守卫：if ($(this.elem).is(':disabled')) return;，防止后续逻辑误执行 - 注意：这个
keydown绑定必须在form.render('select')之后执行，因为此时模拟下拉层的DOM结构才完整
只禁用某一个option而非整个select
另一种需求是“选中A后，B选项变灰不可选”，这属于动态禁用特定 option。Layup默认不会读取原生 disabled 属性的变化，必须显式触发重渲染。
- 先用
$('#mySelect option[value="b"]').prop('disabled', true);设置原生属性 - 然后调用
form.render('select')——缺少这一步，UI完全没变化 - 如果批量操作多个选项，不要在循环里反复调
form.render('select')，先统一设好所有disabled，最后调一次即可 - 注意IE11下
querySelector('option[value="b"]')可能失效，备选方案是遍历this.elem.options
禁用逻辑写在异步回调里失效？
比如用AJAX加载数据后才决定是否禁用某些选项，这时候容易掉坑：DOM已经插入，但form实例还没加载完毕，或者form.render('select')被放在了layui.use外面。
- 所有涉及
form.render()的操作，必须包裹在layui.use('form', function(){...})回调内 - 如果
select是AJAX动态插入的，需要先插入DOM，然后再调form.render('select')——顺序错乱就会失效 - 不要复用全局
form变量：每次layui.use都应该重新获取实例，避免作用域污染
最后补充一个容易被忽视的要点：前端禁用本质上只是体验层面的防护。用户完全可以通过右键审查元素、手动删掉 disabled 属性来绕过限制。真正的业务校验必须落在服务端，这一点无论多熟练的开发者都不要忽略。
