Layui如何实现表单Select下拉框在选中后锁定该项不可改

选中后禁用当前select元素本身需在form.on('select()')回调中设置disabled属性并调用form.render('select')，否则UI不同步；键盘操作需手动监听keydown阻止，禁用option则需设prop('disabled',true)后重渲染。

选中后禁用当前select元素本身

用户点击选择某项后，立刻让整个下拉框不可再操作，这是最常见需求。关键不是“锁选项”，而是“锁控件”——select 一旦被设为 disabled，所有交互（鼠标、键盘、触屏）都会被阻断。

• 必须在 form.on('select(filterName)') 回调里执行，且判断不能写在事件外（否则首次渲染就禁用了）
• 禁用后要立刻调用 form.render('select')，否则 UI 仍可点击（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 状态。

• 必须手动监听 keydown 并阻止：在 form.on('select()') 后加 $(this.elem).on('keydown', function(e){ if ($(this).is(':disabled')) e.preventDefault(); });
• 更稳妥的做法是，在 change 或 select 事件开头加守卫：if ($(this.elem).is(':disabled')) return;，避免后续逻辑误执行
• 注意：这个 keydown 绑定需在 form.render('select') 之后，否则目标元素可能还没生成 .layui-form-select 结构

只禁用某一个 option 而非整个 select

若需求是“选中 A 后，B 选项变灰不可点”，那不是锁控件，而是动态禁用特定 option。Layui 不自动读取原生 disabled 属性，必须显式触发重渲染。

• 先定位并设置原生 option 的 disabled 属性：$('#mySelect option[value="b"]').prop('disabled', true);
• 再调用 form.render('select') —— 缺少这一步，UI 完全无变化
• 批量操作时别在循环里反复调 form.render('select')，先统一设 disabled，最后调一次即可
• IE11 下 querySelector('option[value="b"]') 可能失效，建议 fallback 到遍历 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 属性来绕过——前端禁用只是体验层防护，业务校验必须落在服务端。