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.