必须用form.on('checkbox(filter)')监听,因layui隐藏原生checkbox仅暴露伪元素,直接监听click或checked会失效;需在回调中操作dom、清空值并移除lay-verify,推荐layui-hide类而非.hide()。

form.on('checkbox(filter)' 里操作 DOM 才可靠
直接监听原生 click 或读 checked 属性会失效,因为 Layui 把真实 input[type="checkbox"] 隐藏了,只暴露伪元素。必须用表单模块的事件监听:
- 给 checkbox 设置
lay-filter="agree" - 用
form.on('checkbox(agree)', function(data) { ... })捕获状态变化 -
data.elem.checked是当前真实勾选状态(布尔值),不是字符串 - DOM 操作必须放在这回调里,不能提前或延后
隐藏时要清空值 + 移除 lay-verify
单纯 .hide() 或 display: none 不行:表单校验仍会触发,required 规则会让提交失败。
- 隐藏前执行:
layui.$('#target-input').val('').attr('lay-verify', '') - 显示时恢复:
layui.$('#target-input').attr('lay-verify', 'required')(按需还原) - 更稳妥的做法是改用
layui-hide类,它语义清晰且不干扰form.render() - 别对
.layui-form-item子元素单独 hide,否则后续form.render()可能计算高度异常
radio 或 select 触发显隐,写法稍有不同
radio 组用 form.on('radio(filter)'),select 用 form.on('select(filter)'),逻辑一致但事件名不同。
- select 的
data.value是选中 option 的value字符串,注意类型判断(比如data.value === '1') - radio 的
data.value同样是字符串,不要写成== 1这种弱比较 - 如果目标字段是
textarea或select,隐藏后也要清空其值并移除lay-verify,否则form.val()仍会返回旧值
多选 checkbox 组要汇总状态再判断
一组 name 相同的 checkbox(如 name="roles"),不能只靠单个 change 事件决定显隐——用户连点多个时中间状态不可靠。
- 在
form.on('checkbox(roles)')回调里,用layui.$('input[name="roles"]:checked').length统计已勾选项数 - 初始化时也要手动检查:
layui.$('input[name="roles"]').each(...)或用form.val('filter-name')读取当前值数组 - 隐藏目标项前,确保所有相关字段都已清空、校验属性已移除,避免残留影响
form.on 的方式,大概率会在某次 form.render() 后失效。











