单击一次后，如何禁用DIV“像提交按钮一样”？答案

【问题标题】：How can I disable a DIV "acting like a submit button" after it is clicked once?单击一次后，如何禁用DIV“像提交按钮一样”？
【发布时间】：2013-05-29 22:59:11
【问题描述】：

我有一个像提交按钮一样工作的 div，所以当用户单击它时，它会提交一个表单并向服务器发送一个 ajax 请求。我遇到的问题是，如果用户两次单击按钮，即使它是 AJAX 请求，它也会创建重复项。所以我想要做的只是禁用并将其重新命名为“请稍候......”，直到请求完成。防止重复提交。

所以我的问题是如何使用 jQuery 在单击后重命名和禁用 div 的“灰显”？

谢谢

【问题讨论】：

标签： jquery disabled-control disabled-input

【解决方案1】：

使用one：

$('#mydiv').one('click', function(){ // one : only once
  $.ajax({ ... });// launch your task
  $(this).html('Please wait...') // change the text
     .css('background-color','#444'); // and the background color
});

【讨论】：

谢谢，因为我在更改 div 的内容时采纳了您的一些回答。

【解决方案2】：

您可以使用几种方法：

隐藏您的“提交”div，并在其位置显示一个不同的“请稍候...”div

在 div 被点击时设置 disabled 属性，并在提交处理程序中检查该属性

$("div.submit").click(function(e) {
    if ($(this).prop("disabled"))
        return false;
    // any other error checking, setup etc...
    $(this).prop("disabled", true);
    // submit the request...
});

您还可以使用全局标志或 jQuery 的 .data() 函数来标记表单何时提交，但我建议使用属性方法。请求完成后，您可以将 disabled 属性设置为 false，从而允许稍后重新提交表单（如果需要）。

【讨论】：

非常感谢您的回答，它为我提供了如何正确实施它的第一个线索。