点击元素后禁用其再次被点击

Question

我有一个按钮，可以保存用户编辑的内容。我不希望他们因为服务器负载而多次点击保存按钮。我想在他们单击后禁用该按钮。 这是我尝试过的代码（虽然不起作用）：

  var active = true;
  $("#save").click(function() {
    if (!active) return;
    active = false;
........
........
........
    active = true;

问题在于用户仍然可以多次点击该元素。我该如何解决这个问题？

编辑：抱歉，我忘记提到我希望在onclick代码执行完毕后再启用点击。

- egidra

---

#save 是一个 <input type="button" /> 吗？ - Brad Christie

在你的代码中，你似乎又将active设置为true了，这会让他们再次点击...所以删除最后一行就可以了吗？ - Coeffect

不，这是一个 div。三行点是我的代码。我只想在真正的代码行执行后再次使按钮可点击。 - egidra

Answer 1

试试这个

$("#save").one('click', function() {
    //this function will be called only once even after clicking multiple times
});

- ShankarSangoli

---

抱歉，我忘了提到我想在代码执行后启用该功能。 - egidra

一旦所需的代码被执行并且您认为现在应该重新附加事件，您可以再次使用“one”设置处理程序。谢谢。 - ShankarSangoli

难道不应该是 $("#save").one('click', function() {... 我看到有 13 个赞，但是... - gdoron

Answer 2

这里有一个disabled属性：http://jsfiddle.net/uM9Md/.

  $("#save").click(function() {
    $(this).attr('disabled', true)
........
........
........
    $(this).attr('disabled', false)
  });

- pimvdb

Answer 3

您可以取消绑定点击处理程序，但我会选择使用.one，如@ShankarSangoli的答案所述（+1）。

$("#save").click(function() {

    // do things

    $(this).unbind("click");

});

http://api.jquery.com/unbind/

- karim79

Answer 4

如果该元素是一个输入框，你可以非常容易地这样做：

<input name="BUTTON" type="submit" value="Submit" onSubmit="document.BUTTON.disabled = true;">

那些方便的HTML JavaScript集成东西真不错。

- alt

Answer 5

假设：

<input type="button" id="save" ... />

你可以选择做以下操作：

$('#save').click(function(){
    var $save = $(this);

    //
    // save code
    //

    $save.get(0).disabled = true;
});

你可以使用原生的方法禁用按钮，或者使用jQuery的one功能：

$('#save').one('click',function(){
    //
    // save code
    //
});

该函数只会执行一次，之后必须重新绑定。（但是如果您根据参数来决定启用/禁用，使用disabled attribute可能是更好的选择。）

- Brad Christie