chongzixin chongzixin - 1 month ago 9
jQuery Question

How to enable and disable Twitter Bootstrap Button?

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

Comments