Layui 实现rate评分点击后只读，动态rate控制只读，动态控制只读

最新推荐文章于 2025-12-24 17:41:11 发布

原创最新推荐文章于 2025-12-24 17:41:11 发布 · 3.4k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#Layui #JS #rate评分 #动态控制只读 #评分点击后只读

前端专栏收录该内容

5 篇文章

订阅专栏

本文介绍如何使用Layui的rate组件实现在用户评分后，评分组件变为只读状态，防止二次评分，通过在用户选择评分后重新渲染组件并设置为只读。

废话不多说了。。直接粘代码

layui.use(['rate'], function(){
    var rate = layui.rate;
    rate.render({
        elem: '#score'
        ,value: 3.5
        ,half: true
        ,text: true
        ,choose: function(value){
            value = 5;
            rate.render({   //再一次渲染rate评分
                elem: '#score'
                ,value: value   //设置value
                ,half: true
                ,text: true
                ,readonly: true  //设置只读
            });
        }
    })
});

可以看到，通过Layui内置的choose方法，点击之后，在choose再一次通过render()来渲染rate。

这样就可以动态使评分变为只读，从而实现点击一次评分变为只读，防止二次评分的情况。