真正要“隐藏但保留功能”,需移除 input 的 name 属性,用 css 隐藏其父级 .layui-form-item 容器,并在 show/hide 后调用 form.render('input');禁用搜索框应通过组件配置项而非直接隐藏 dom。

layui 表单中隐藏某个 input 元素,不靠 display: none
直接写 style="display: none" 会导致 layui 表单校验失效、form.val() 读不到值、甚至影响其他元素渲染。真正要“隐藏但保留功能”,得走 layui 的表单管理逻辑。
核心做法是:用 layui.form 渲染后,把目标 input 的 name 属性临时移除(避免被 form.val() 收集),再用 CSS 隐藏其父级容器(不是 input 本身),同时保留 DOM 结构和事件绑定能力。
- 找到该 input 所在的
.layui-form-item容器,给它加一个自定义 class,比如hide-when-idle - 初始化 form 后,用 jQuery 或原生 JS 控制这个容器的
display,例如:$('.hide-when-idle').hide() - 如果需要动态显示/隐藏,不要用
remove()或empty(),否则 form 模块会丢失对该字段的引用 - 若该 input 是必填项,记得同步调用
form.verify()重置验证规则,或在提交前手动跳过校验
radio/checkbox 控制 input 显示隐藏时,form.render() 必须调用
layui 不会自动监听 DOM 显示状态变化。你用 jQuery 切换 .layui-form-item 的 display,但如果不通知 form 模块,后续 form.val('form-filter') 可能仍返回旧值,甚至校验报错“未填”。
- 每次 show/hide 后,必须执行
form.render('input')(仅刷新 input 类型) - 如果还涉及 select、checkbox 等,建议统一用
form.render()(全量重绘) - 别漏掉
layui.use(['form'], function(){...})包裹逻辑,否则form实例不可用 - 常见错误:在
form.on('radio(...)')回调里只改 CSS,没调form.render()→ 表单提交时值为空
隐藏搜索栏里的 input,但保留搜索行为
这里说的“搜索栏”通常指 xm-select 或 formSelects 这类增强组件自带的搜索框。它们内部封装了 input,不能直接操作 DOM 隐藏——一藏就断搜索逻辑。
- 对
xm-select:用配置项searchable: false关闭搜索框,而不是隐藏它 - 对
formSelects:初始化时传{search: false},或调用formSelects.config('id', {search: false}) - 如果硬要隐藏(比如权限控制),得用 CSS 选择器精准命中组件内部的搜索 input,例如:
.xm-select-search input,然后visibility: hidden+pointer-events: none,避免遮挡下拉箭头 - 注意:隐藏后用户无法输入,但下拉选项仍可点击选择 —— 这才是安全的“隐藏搜索”语义
容易被忽略的细节:隐藏后表单提交值还在吗?
值是否保留,取决于你怎么“隐藏”。display: none 的 input,form.val() 默认仍会收集;但若你移除了 name,值就彻底丢了。而 visibility: hidden 或 opacity: 0 不影响数据采集,只是视觉不可见。
- 最稳妥的做法:保持
name不变,用visibility: hidden+height: 0; overflow: hidden压缩容器,既不干扰布局,又不丢数据 - 如果该字段纯属前端逻辑用(如作为条件开关),建议用隐藏域
<input type="hidden" name="xxx">替代,更语义化 - 务必测试移动端:某些安卓 WebView 下,
display: none的 input 会触发键盘异常弹出











