必须用容器包裹+自定义结构模拟radio:保留原生input用于数据绑定,视觉层由custom-radio控制,配合js触发click、防重复绑定、延时初始化及独立图标字体路径。

layui单选框无法直接替换内置图标
layui 的 radio 组件在渲染时会自动插入 <i class="layui-icon"></i>,且该节点由 layui 内部逻辑硬编码生成——你改不了它的 class,也拦不住它重绘。哪怕你在 form.render() 后用 JS 手动替换 i 标签内容,下次表单刷新(比如切换 tab、弹窗重载)就会被还原。
必须用「容器包裹 + 自定义结构」模拟 radio
真实 <input type="radio"> 保留用于数据绑定和校验,视觉层完全由你控制:
- 外层用
<div class="layui-form-item"> 包裹,避免被 layui 表单模块误处理<li>内部放一个隐藏的原生 <code><input type="radio" name="xxx" value="1">(带name和value) - 旁边放自定义图标容器:
<span class="custom-radio"><i class="iconfont icon-check"></i></span> - 用 CSS 控制
.custom-radio的尺寸、颜色、选中态(配合:checked ~ .custom-radio或 JS 切换 class) - 点击
.custom-radio时,手动触发对应input的click(),保证数据同步 - 每次初始化前先清理:$(document).off('click', '.custom-radio')
- 或者用命名空间:
$(document).on('click.radioCustom', '.custom-radio', ...),销毁时$(document).off('.radioCustom') - 别在
done回调里直接绑,因为 DOM 可能未完全就绪;推荐在form.render()完成后延时 1 帧再绑定:setTimeout(() => { /* 绑定 */ }, 0) -
iconfont.css在layui.css之后加载,否则字体声明可能被覆盖 - 图标 class 不要混用
layui-icon前缀,例如icon-check而非layui-icon-check,避免样式冲突 - 检查浏览器 Network 面板,确认
iconfont.woff2等字体文件返回 200,而非 404 —— 相对路径在构建后极易失效 - 移动端测试时注意:某些安卓 WebView 对
@font-face解析异常,可加 fallback 字体或降级为 SVG
图标点击事件必须防重复绑定
如果表格或弹窗内多次初始化这类 radio,$(document).on('click', '.custom-radio', ...) 会累积监听器,导致一次点击触发多次。实操建议:
自定义图标字体路径和 class 必须独立于 layui-icon
如果你引入的是 iconfont,确保:
真正麻烦的不是画个图标,而是让这个“假 radio”在表单提交、验证、重渲染时始终和真实 input 保持一致。稍不注意,就会出现界面上选了但 data 里没值,或者校验提示消失但图标还亮着。











