如何启用和禁用Twitter Bootstrap Button？

Question

我正在尝试实现在单击它时禁用按钮的方案，然后在ajax请求成功完成后再次启用它。

以下是我的代码片段。

表格

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

它不起作用。在Chrome上检查我的控制台会告诉我Uncaught SyntaxError: Unexpected token (。感觉这在某个地方是一个愚蠢的错误，我无法弄明白。我已经读过prop适用于jQuery 1.6.1及更高版本，而我是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);
      }
    });
  }
});

试试这个

Answer 2

From my answer to another post in SO! 我想不出更简单/更简单的方法！ ; - ）

对于锚标签（链接）：

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

启用Anchor标记：

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

要禁用Anchor标记：

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

Answer 3

使用http://jsfiddle.net/检查您的代码。

尝试：

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

小提示更正：http://jsfiddle.net/shree/qB9aW/ .JSHint为您提供错误提示。