使用jQuery单击按钮后如何禁用按钮? [英] How to disable button after its been clicked using jQuery?

查看:77
本文介绍了使用jQuery单击按钮后如何禁用按钮?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

如何在单击每个按钮后禁用每个按钮,以及如何通过jQuery像计数器一样递增?

How to disable each button after its been clicked, also how to increment like counter through jQuery?

我正在为每个评论构建一个喜欢"按钮,并使用jQuery将数据发布到PostsController.我正在为循环中的每个项目传递Id值@ item.Id,并通过下面的jQuery代码处理Id.

I am building a 'like' button for each comment and posting data using jQuery to PostsController. I am passing the Id value, @item.Id, for each item in the loop and handling the Id through below jQuery code.

@foreach (var item in Model.PostComments)
{ 
    <a id="@item.Id" href="#" class="btn-sm btn-success btn-like"><span class="glyphicon glyphicon-thumbs-up"></span></a>
                    <span id="commentcounter">@Model.CommentMetrics.Where(a => a.PostCommentId == item.Id).Sum(a => a.VoteValue)</span>
}

而jQuery代码是:

and the jQuery code is :

<script>
  $(document).ready(function() {
    $('a.btn-like').click(function(e) {
      e.preventDefault();
      $(this).attr("disabled", "disabled");
      $('#commentcounter').text(function(i, oldVal) {
        return parseInt(oldVal, 10) - 1;
      })
      $.ajax({
        url: '@Url.Action("CommentUp", "Posts")',
        data: {
          id: this.id
        }
      });
    });
  });
</script>

推荐答案

jQuery文档

属性与属性:

属性和属性之间的差异在特定情况下可能很重要 情况.在jQuery 1.6之前,.attr()方法有时带有属性值 检索某些属性时要考虑在内,这可能会导致不一致 行为.从jQuery 1.6开始,.prop()方法提供了一种显式地 检索属性值,而.attr()检索属性.

The difference between attributes and properties can be important in specific situations. Before jQuery 1.6, the .attr() method sometimes took property values into account when retrieving some attributes, which could cause inconsistent behavior. As of jQuery 1.6, the .prop() method provides a way to explicitly retrieve property values, while .attr() retrieves attributes.

官方文档: http://api.jquery.com/prop/

对于您的示例,您需要这样做:

For your example you need this:

 $(this).prop('disabled', true);

这篇关于使用jQuery单击按钮后如何禁用按钮?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆