layui.rate 的 disabled 参数是只读开关,设为 true 即可启用只读态,支持小数分值、自动灰化、禁用交互且不触发 change 事件;动态切换需销毁并重新 render,表格中须在 table.done 中按行处理并同步 hidden input 值。

layui.rate 的 disabled 参数才是只读开关
直接设 disabled: true 就行,不是加 readonly 属性,也不是用 CSS 隐藏鼠标事件。Layui 的 rate 组件原生支持只读语义,disabled 为 true 时:UI 自动灰化、鼠标 hover 无反馈、点击完全无响应、支持小数分值(比如 4.5 星)、change 事件也不会触发。
常见错误是试图给容器加 pointer-events: none 或监听 click 后 return false,这些都绕过了组件内部状态,会导致视觉和行为不一致——比如星星还亮着,但点不了;或者评分值显示错乱。
-
disabled必须在rate.render()初始化时传入,动态改需重新 render(见下一条) - 若同时设了
show-score: true,右侧分数仍会正常显示 - 未选中图标颜色由
disabled-void-color控制,不是void-color
动态切换只读状态必须重新 render
rate 没有类似 setDisabled() 的方法,disabled 是初始化参数,不能运行时修改。想从可编辑切到只读,或反之,只能销毁旧实例再新建。
别用 layui.rate.render().destroy() —— 这个 API 并不存在,调了也没用。正确做法是先移除 DOM 中已渲染的评分节点(包括 .layui-rate 子元素),再用新配置调一次 rate.render()。
- 安全做法:给容器加唯一 class(如
js-rate-dynamic),每次 render 前先清空layui.$('.js-rate-dynamic').empty() - 如果表格里用 rate,必须在
table.done回调里做这事,且每次分页/重载都要执行 - 动态设值后想保持只读?先
rate.set()更新 UI,再重新render()带disabled: true
templet 中嵌入 rate 时只读容易漏掉的点
表格列里用 templet 渲染 rate,最容易出问题的是:模板里写了 <div class="layui-rate"></div>,但没传 disabled,结果 done 回调里 render 时用了默认配置,变成可编辑了。
必须确保:templet 返回的容器带可识别标识(比如 data-disabled="true"),然后在 done 里读这个属性决定是否传 disabled: true。
- 别在
templet函数里直接调rate.render(),会重复初始化、内存泄漏 - 如果某行要只读、某行可编辑,
done里得遍历每个容器,按data-disabled值分支处理 - 表格导出 CSV 时 rate 不参与,但若你用 hidden input 同步分值,记得只读状态下也要保证 hidden input 的 value 正确写入
只读状态下如何让分值正确提交
只读的 rate 本身不产生表单字段,它只是展示。如果后端需要接收该分值,必须额外加一个 <input type="hidden"> 并同步更新其 value。
很多人以为设了 disabled: true 就万事大吉,结果提交时发现字段为空——因为 rate 不自动绑定 hidden input。
- 初始化时,在 rate 容器旁紧跟一个
<input name="score" type="hidden" value="{{d.score}}"> - 只读状态下,
change不触发,所以不用监听;但动态切换为可编辑时,得补上change回调来更新 hidden input - 若用
rate.set()主动设值,记得手动同步 hidden input:$('[name="score"]').val(newValue)











