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.

Does the error specifies any line?Just try to run in firefox with the help of firebug..it will show you the exact problem — Mothy, Oct 07 '13 at 08:49

score 10 · Accepted Answer · answered Oct 07 '13 at 08:55

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

see .validate() api it has a definite structure... u cannot add .prop in there... — Shashank, Oct 07 '13 at 09:07

score 2 · Answer 2 · edited May 23 '17 at 12:18

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");

enter image description here

To disable the Anchor tag:

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

enter image description here

edited May 23 '17 at 12:18

Community

1
1

answered Apr 28 '15 at 09:18

oikonomopo

4,025
7
44
73

Hello. I don't quiet understand where to put this code which begins with $. Seriously, I am new to this stuff, can you point me to some resource or just a key words for me to search ? many thanks! – Volodymyr Balytskyy Jan 13 '16 at 19:43
1

Inside a js function where you have your desired conditions! Check the if...else statement in Javascript! – oikonomopo Jan 14 '16 at 09:12

score 0 · Answer 3 · answered Oct 07 '13 at 09:04

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.

How to enable and disable Twitter Bootstrap Button?

3 Answers3

Linked