How to disallow second click on Google +1 button

Question

I'm going to forbid a second click on Google +1 button.

<g:plusone callback='click_callback' href="myurl.com"></g:plusone>

My click_callback function is:

function click_callback(b) {
  if(b.state == "on") {
    $.ajax({
      type: "POST",
      url: "gp1process.php",
      data: "id=" + id,
      cache: false,
      success: function(a) {
        $("#Hint").html(a);
        remove(id);
        click_refresh()
      }
    })
  }

Can I use one() method of jQuery?

Answer 1

Since I am not actually posting to an ajax request I placed the $(this).attr("disabled", "disabled") before the ajax call but you will want it in your success function.

What this will do is add the disabled="disabled" attribute to your button after you click it. I think that is what you were looking for.

$(document).ready(function() {
  $('button').click(click_callback);
});

function click_callback(b) {
  id = $(this).attr('id');
  if (!$(this).attr("disabled")) {
    //the line below should be in your success function
    //i placed it here so you can see the feature work 
    //since i am not really running the ajax
    $(this).attr("disabled", "disabled")
    $.ajax({
      type: "POST",
      url: "gp1process.php",
      data: "id=" + id,
      cache: false,
      success: function(a) {
        $(this).attr("disabled", "disabled")
        $("#Hint").html(a);
        remove(id);
        click_refresh()
      }
    })
  } else {
    //the button is diabled do something else

  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<g:plusone callback='click_callback' href="myurl.com"></g:plusone>
<button id="theID">+1</button>

<div id="hint"></div>