Layui表单select下拉框选中后锁定不可修改

选中某个选项后立即禁用整个下拉框，这个功能在实际项目中非常常见。但直接套用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 属性来绕过限制。真正的业务校验必须落在服务端，这一点无论多熟练的开发者都不要忽略。