如何启用和禁用Twitter Bootstrap按钮？

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。

- chongzixin

---

错误指定了哪一行代码吗？尝试在Firefox中使用Firebug运行，它会显示确切的问题。 - Mothy

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

试一下吧

- Shashank

---

请查看 .validate() API，它有明确的结构... 您不能在其中添加 .prop... - Shashank

Answer 2

这是我在SO的另一个帖子中的回答！ 我想不出更简单/更容易的方法！;-)

---

对于锚标签（链接）：

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

要启用锚点标签：

---

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

---

禁用锚点标签：

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

- oikonomopo

---

你好。我不太明白应该把以$开头的这段代码放在哪里。说真的，我对这方面很新，你能给我指点一些资源或者关键词让我搜索吗？非常感谢！ - Volodymyr Balytskyy

在 JavaScript 函数中，您可以设置所需的条件！请检查 JavaScript 中的 if...else 语句！ - oikonomopo

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 可以帮助你找出错误。

- 4b0