jquery如何让用户只允许按钮点击一次？

Question

http://jsbin.com/kinaqoyawe/edit?html,css,js,output

$(".radius-nice").click(function(){
    $(this).addClass("on");
    var add=$(".num-add").text();
    add++;
    $(".num-add").text(add);
    return false;
});

怎么在原有基础上添加一些只接受用户单击一次？
我想让用户允许点赞一次。之后就不能再单击了。请问怎么写？

Answer 1

http://www.w3school.com.cn/jquery/event_one.asp

$(".radius-nice").one("click", functin() { ... });

当然这样做用户刷新了页面后还是可以再点一次的。要想让用户刷新页面后还不能继续点，要通过后台判断，jQuery做不了了。

Answer 2

您可以使用这个方法：

$("p").one("click", function(){
  alert( $(this).text() );
});

为每一个匹配元素的特定事件（像click）绑定一个一次性的事件处理函数。

Answer 3

这个要看你需求。
如果单次刷新页面只能点击一次的话可以进行计数方式。隐藏一个保存值进行修改值即可。也可以直接btn事件的删除。也可以替换标签。
如果只能点一次必须服务端保存状态。刷新页面进行判断用户是否进行点击过。

最后可以小建议可以看下Vue js。数据的双向绑定可以学一下看看它的是这么实现的。

Answer 4

$(".radius-nice").click(function(){
    if($(this).hasClass('on')) {
        return;
    }
    $(this).addClass("on");
    var add=$(".num-add").text();
    add++;
    $(".num-add").text(add);
    return false;
});

Answer 5

这个需要服务端的 和 前端配合才能实现

1.用户点击按钮后 立即 禁用该按钮 disabled  属性,但这个禁用了
用户刷新页面 还是会再次点击的
2.服务端去数据库验证，用户是否已经点赞，页面渲染的时候 直接disabled 就行
去执行点赞的数据库操作的时候，先去验证是否已经赞过了就行

Answer 6

简单的设置cookie吧，如果cookie存在不允许点击