How to disable button after its been clicked using jQuery?

Question

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

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

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>

Possible duplicate of [Disable button in jQuery](https://stackoverflow.com/questions/15122526/disable-button-in-jquery) — Heretic Monkey, Jan 25 '19 at 17:59
I went through this post, I want to make both hide and toggle back as appear. — mohammed alani, Jan 29 '19 at 04:16

score 1 · Answer 1 · edited Jan 25 '19 at 18:37

Jquery Documentation

Attributes vs. Properties:

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.

official documentation: http://api.jquery.com/prop/

For your example you need this:

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

mzparacha · Answer 2 · 2019-01-25T18:13:37.673

0

use $(this).prop("disabled", true); to disable the button inside your click handler

How to increment comment counter

First if commentcounter is in loop it will get the same id that will produce an error you can do one thing that append @item.Id with the commentcounter id to make it unique so it should look like commentcounter12 , commentcounter23 if @item.Id = 12 or 23 etc for multiple commentcounters now write this code to increment

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

edited Jan 25 '19 at 18:13

answered Jan 25 '19 at 15:07

mzparacha

627
6
20

I have used your suggestion and it worked fine but how to increment commentcounter for each item? – mohammed alani Jan 25 '19 at 15:25
just right $('#commentcounter').text(odVal+1) and please tell me where are you getting the oldvalue ? – mzparacha Jan 25 '19 at 16:41
commentcounter is in the loop and its id is changing for each iteration. How to perform such action ? – mohammed alani Jan 25 '19 at 17:31
1

Don't use `attr` for "disabled", use `prop`. See [.prop() vs .attr()](https://stackoverflow.com/q/5874652/215552) – Heretic Monkey Jan 25 '19 at 17:58
I have put it like this
@Model.CommentMetrics.Where(a => a.PostCommentId == item.Id).Sum(a => a.VoteValue)
and its not working too, Jquery next comment – mohammed alani Jan 25 '19 at 18:33
– mohammed alani Jan 25 '19 at 18:33
Set the id of span like i was meant to say span id must contain commentcounter but to make it unique concatinate the value of @item.id with it – mzparacha Jan 25 '19 at 18:46
I got an error too : @Model.CommentMetrics.Where(a => a.PostCommentId == item.Id).Sum(a => a.VoteValue) – mohammed alani Jan 26 '19 at 01:59
you can not add + in ids try to write it as id="commentcounter@item.Id" – mzparacha Jan 26 '19 at 04:21
You should search your syntax by your self here community can only suggest you solutions. I think you are using razor so it will work like that for reference check this https://stackoverflow.com/questions/4759849/how-to-concatenate-the-id-of-the-html-element-using-razor-asp-net-mvc – mzparacha Jan 26 '19 at 07:38

How to disable button after its been clicked using jQuery?

2 Answers2

Linked