首页 > 网页制作 >Layui表单下拉框选中后锁定不可修改

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

来源：互联网 2026-07-02 08:25:01

选中某个选项后立即禁用整个下拉框，这需求很常见，但直接套用disabled属性往往会在UI不同步、键盘操作绕开关闭、仅禁用个别选项等细节上翻车。下面就把这三个典型场景的坑和正确解法拆开讲清楚。很多初学者以为选中后禁用select就是设个disabled属性的事，实际动手才发现：UI根本没反应，或者

选中某个选项后立即禁用整个下拉框，这需求很常见，但直接套用disabled属性往往会在UI不同步、键盘操作绕开关闭、仅禁用个别选项等细节上翻车。下面就把这三个典型场景的坑和正确解法拆开讲清楚。

很多初学者以为选中后禁用select就是设个disabled属性的事，实际动手才发现：UI根本没反应，或者键盘上下键还能切换选项。Layui的模拟下拉层和原生状态是两套体系，必须手动同步才行。

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

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

长期稳定更新的攒劲资源： >>>点此立即查看<<<

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

禁用逻辑必须写在 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结构才完整