使用jQuery单击后如何禁用按钮？

Question

每个按钮被点击后如何禁用，以及如何通过jQuery像计数器一样递增？

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

@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 代码是：

<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>

Answer 1

Jquery 文档

属性与属性：

属性和属性之间的区别在特定领域可能很重要 情况。在 jQuery 1.6 之前，.attr() 方法有时会获取属性值 在检索某些属性时考虑，这可能会导致不一致 行为。从 jQuery 1.6 开始，.prop() 方法提供了一种显式方法 检索属性值，而 .attr() 检索属性。

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

对于你的例子，你需要这个：

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

Answer 2

使用$(this).prop("disabled", true); 禁用点击处理程序中的按钮

如何增加评论计数器

首先，如果commentcounter处于循环中，它将获得相同的ID，这将产生错误，您可以做一件事，将@item.Id附加到commentcounter id以使其唯一，因此它应该看起来像commentcounter12，commentcounter23如果@item.Id = 12 or 23等多个评论计数器现在编写此代码以递增

$('commentcounter'+e.target.id).text(parseInt($('commentcounter'+e.target.id).text())+1)