javascript - 如何禁用双击 Jquery 模态对话框按钮？

Question

我正在使用 Jquery 模态对话框将一些数据提交到服务器端，然后保存到数据库中；这里我的模式对话框代码是:

    function loadUserDialog(tag, event, target, id) {
            event.preventDefault();

$.validator.unobtrusive.parse('#frmModalPopup');

            var $loading = $('<img src="@Url.Content("~/Content/images/ajaxLoading.gif")" alt="loading" class="ui-loading-icon" style="margin: 150px 150px;">');
            var $url = $(tag).attr('href');
            var $title = $(tag).attr('title');
            var $dialog = $('<div></div>');
            $dialog.empty();
            $dialog
            .append($loading)
            .load($url)
              .dialog({
                  autoOpen: false
               , title: $title
               , width: 500
               , modal: true
               , minHeight: 400
               , show: 'fade'
               , hide: 'fade'
              });
            $dialog.dialog("option", "buttons", {
                "Submit": function () {
                    var dlg = $(this);
                    if (IsValidUserName() && $('#frmModalPopup').validate().form()) {
                        $.ajax({
                            url: $url,
                            type: 'POST',
                            data: $(target).serialize(),
                            success: function (response) {
                                var cid = $(response).attr('id');
                                if (cid != null && cid != undefined) {
                                    $(response).fadeIn('slow').appendTo(id);
                                    $(window).scrollTop($('#' + cid).offset().top);
                                }

                                dlg.dialog('close');
                                dlg.empty();
                            },
                            error: function (xhr) {
                                alertMessage("EmailId is already in use!");
                                $.validator.unobtrusive.parse('#frmModalPopup');
                            }
                        });
                    }
                },
                "Cancel": function () {
                    $(this).dialog('close');
                    $(this).empty();
                }
            });

            $dialog.dialog('open');
        };

但是，当我多次单击“提交”按钮(多次)时，表单会被提交多次，并且我会收到重复的数据提交信息。那么您能否告诉我如何禁用双击或多次单击“提交”按钮。

Answer 1

首次提交时禁用对话框，在继续之前检查它是否已禁用，如果已禁用则返回。

"Submit": function () {
  if ($(this).hasClass("disabled"))
    return;

  $(this).addClass("disabled");

  // continue;
}

编辑:您可以使用此方法来添加一些额外的用户界面响应能力，方法是在禁用它时添加“正在工作...”或其他一些消息

$(this).addClass("disabled");
$dialog.append("Working...");