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

作者：袖梨 2026-07-02

选中后禁用当前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