点击后禁止点击元素答案

【问题标题】：Disabling an element from being clicked after it is clicked点击后禁止点击元素
【发布时间】：2011-07-19 18:14:26
【问题描述】：

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

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

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

编辑：对不起，我忘了说我想在 onclick 代码执行完成后启用点击。

【问题讨论】：

【解决方案1】：

试试这个

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

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

您可以取消绑定点击处理程序，但我会按照 @ShankarSangoli 的回答 (+1) 使用 .one。

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

    // do things

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

});

【讨论】：

【解决方案4】：

如果元素是一个输入，你可以很容易地做到这一点：

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

那里有一些方便的 HTML Javascript 集成。

【讨论】：

【解决方案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 可能是更好的选择。）

【讨论】：