How to enable and disable Twitter Bootstrap Button?

Question

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.

The below is the snippet of my code.

Form

<button id="btnSubmit" type="submit" class="btn btn-warning btn-lg">Submit!</button>

Javascript

$('#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);
      }
    });
  }
});

It doesn't work. And checking my console on Chrome tells me Uncaught SyntaxError: Unexpected token ( . It feels like it's a stupid mistake somewhere and I can't figure it out. I have read that prop is meant for jQuery 1.6.1 and later and I am on 1.8.3.

Answer 1

$('#resForm').validate({


  submitHandler: function(form) {
// disable submit button
  $('#btnSubmit').prop('disabled', true);
    $.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);
      }
    });
  }
});

Try this

Answer 2

From my answer to another post in SO! I can't think a simpler/easier way! ;-)

---

For Anchor Tags(Links) :

<a href="#delete-modal" class="btn btn-danger" id="delete"> Delete</a>

---

To enable the Anchor tag:

 $('#delete').removeClass('disabled');
 $('#delete').attr("data-toggle", "modal");

---

To disable the Anchor tag:

 $('#delete').addClass('disabled');
 $('#delete').removeAttr('data-toggle');

Answer 3

Use http://jsfiddle.net/ to check your code.

Try:

$('#resForm').validate({
  submitHandler: function(form) {
// disable submit button
  $('#btnSubmit').prop('disabled', true);
    $.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);
      }
    });
  }
});

Fiddle with Correction: http://jsfiddle.net/shree/qB9aW/ .JSHint gives you a hint for error.