title: How to disable button after click in jQuery
body: <p>Sometimes I am able to trigger the submit button twice. and the ajax is triggered twice too.</p>
  
  <p>Here is my html code:</p>
  
  <pre><code>&lt;div class="buttons-area"&gt;
      &lt;input id="step-two" class="btn btn-primary" type="submit" value="Next step »"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And here is my ajax:</p>
  
  <pre><code>&lt;script&gt;
      $(document).ready( function () {
  
          $('#step-two').on('click', function(e) {
  
              e.preventDefault();
  
              var formData = new FormData();
  
              formData.append('username', $('#username').val());
              formData.append('email', $('#email').val());
              formData.append('password', $('#password').val());
              formData.append('password_confirmation', $('#password_confirmation').val());
  
              $.ajax({
                  url:         'registration',
                  method:      'post',
                  processData: false,
                  contentType: false,
                  cache:       false,
                  dataType:    'json',
                  data:        formData,
                  beforeSend: function()
                      {
                          $(".validation-error-inline").remove();
                      }
                  })
                  .done(function(data) {
  
                      if (data.validation_failed == 1)
                      {
                          var arr = data.errors;
  
                          $.each(arr, function(index, value)
                          {
                              if (value.length != 0)
                              {
  
                                  $("#"+index).closest(".middle").next(".right")
                                              .append('&lt;span class="text-error validation-error-inline"&gt;' + value[0] + '&lt;/span&gt;');
  
                              }
                          });
  
                      }
  
  
                  })
                  .fail(function(jqXHR, ajaxOptions, thrownError) {
                      alert('No response from server');
                  });
                  return false;
  
          });
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>How can I disable the button after the first click and allow the next click only if the ajax is finished?</p>
  
  <p>Right now I am able to trigger the ajax two times in the row if I am fast and the same error message is shown twice.</p>