title: How to enable and disable Twitter Bootstrap Button?
body: <p>I am trying to achieve the scenario of disabling a button on clicking it, and then enabling it again after the ajax request has completed successfully.</p>
  
  <p>The below is the snippet of my code.</p>
  
  <p><strong>Form</strong></p>
  
  <pre><code>&lt;button id="btnSubmit" type="submit" class="btn btn-warning btn-lg"&gt;Submit!&lt;/button&gt;
  </code></pre>
  
  <p><strong>Javascript</strong></p>
  
  <pre><code>$('#resForm').validate({
    // disable submit button
    $('#btnSubmit').prop('disabled', true);
  
    submitHandler: function(form) {
      $.ajax({
        ..... typical ajax stuff .....
        success: function(data) {
          alert(data);
          $('success').html(data);
          // enable reserve button again
          $('#btnSubmit').prop('disabled', false);
        },
        error: function (jqXHR, textStatus, errorThrown) {
          // console.log(jqXHR);
        }
      });
    }
  });
  </code></pre>
  
  <p>It doesn't work. And checking my console on Chrome tells me <code>Uncaught SyntaxError: Unexpected token (</code>. It feels like it's a stupid mistake somewhere and I can't figure it out. I have read that <code>prop</code> is meant for jQuery 1.6.1 and later and I am on 1.8.3.</p>