title: Disable entire DIV tag and everything inside after button onclick event
body: <p>I have an HTML markup like following:</p>
  
  <pre><code>&lt;div id="picing-selection" class="disableMe"&gt;
      &lt;a class="upgradeSub" value="@ViewBag.Id"&gt;
          Upgrade &lt;i class="fa fa-money"&gt;&lt;/i&gt;
      &lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And the onclick event defined looks like following:</p>
  
  <pre><code>$(document).on("click", ".upgradeSub", function() {
      $.post("/Subscription/UpgradeSubscription", {
          SubID: $(this).attr("value") 
      }).done(function(data) {
          if (data == "Ok") {
              $(this).prop('disabled', false);
              window.location.href = "/Index/Success";
          } else if (data == "Error") {
              alert("Something went wrong");
          }
      });
  });
  </code></pre>
  
  <p>I want to disable any future onclick event until the server responds with status "ok" or "Error"</p>
  
  <p>I've tried something like:</p>
  
  <pre><code>$(document).on("click", ".upgradeSub", function() {
      $(this).prop('disabled', true);
      // After this goes the post to server
  });
  </code></pre>
  
  <p>But this didn't work... I can still keep clicking and the jquery will keep posting requests to the server...</p>