Layui下拉框禁用需四层防护：HTML设disabled、JS动态设后调form.render('select')、事件回调开头加disabled守卫、keydown拦截；否则仍可点击或键盘操作触发。

直接加 disabled 属性但没调 form.render('select')

这是最常见失效原因：Layui 把原生 隐藏，用

模拟下拉面板，disabled 属性只作用于被隐藏的原生元素，不会自动同步到模拟层。你看到的“还能点”“点了还弹出”，基本都是因为漏了重渲染。

必须在 layui.use('form', function(){}) 回调里执行：

• $("#mySelect").attr("disabled", "disabled") 或 .prop("disabled", true)
• 紧接着调 form.render('select')（传类型比不传更轻量）
• 如果页面只有这一个 select，也可以写 form.render('select', '#mySelect') 精准刷新

form.on('select()') 里禁用后事件仍触发一次

Layui 不会在禁用后撤回当前点击行为，form.on('select(filter)') 仍会执行一次回调——哪怕元素已禁用。不加守卫，后续逻辑可能误执行。

务必在回调开头加判断：

• if ($(this.elem).is(':disabled')) return;
• 或者更严格：if ($(this.elem).prop('disabled')) return;

别依赖 CSS 类或样式灰掉来判断，只认原生 disabled 属性。

键盘操作（↑↓+回车）仍能选中禁用项

Layui 没做 ARIA 兼容性兜底，即使 UI 灰了、鼠标点不动，用户按方向键仍可聚焦到禁用项，回车照样触发 select 事件。

深蓝色网站后台管理系统layui框架模板-AdminPro

一款深蓝色网站后台管理系统layui框架模板

下载

需要两层防御：

• 在 form.on('select()') 开头加守卫（如上）
• 额外绑定 keydown 并阻止默认行为：$(this.elem).on('keydown', e => { if ($(this.elem).is(':disabled')) e.preventDefault(); });
• 注意：这个监听必须在 form.render('select') 之后加，否则 this.elem 对应的 DOM 可能还没生成

想彻底移除下拉交互（连点击区域都消失）

单纯禁用 + 渲染只能让面板不弹、选项不可选，但点击 select 标签区域仍会触发 focus，甚至部分浏览器会高亮边框。

若业务场景确定“永久禁用且不再启用”，可手动删掉模拟面板：

• $("#mySelect").siblings(".layui-form-select").find("dl").remove();
• 这样
  结构彻底消失，点击无任何响应
• ⚠️ 风险：未来要重新启用时，不能只 removeAttr("disabled")，必须先恢复 DOM（比如重新 append
  ），再调 form.render('select')——实际中几乎不可维护

真正容易被忽略的是：禁用不是单点操作，它得覆盖 HTML 初始化、JS 动态设置、事件回调守卫、键盘拦截四层；少一层，用户就能绕过去。