提交后禁用 Jquery 提交按钮

Question

我想在表单提交后禁用提交按钮。这意味着在用户单击提交后，提交按钮不应该是可点击的。这意味着我希望提交按钮即使在刷新后也保持禁用状态

; (function ($) {

    $.fn.tpFormDialogCustom = function (method) {

        var self = this;

        var dialogButtons = [
          {
              text: "Submit and Email",
              id: "tpFormDialog_btnSubmit",
              click: submitandmailTpFormDialog
          },


function submitandmailTpFormDialog() {
  if(CheckValidate()) {
    commonDialogs.showError(ExampleMessages.JournalError);
  } else {
    commonDialogs.showConfirm(ExampleMessages.ConfirmEmail, function() {
      try {
        commonDialogs.showProgress(ExampleMessages.SubmitAndEmail);
        var o = getOptions();
        var form = $(o.form);
        form.ajaxSubmit({
          success: handleEmailResponse,
          beforeSerialize: function($form, options) {
            if(!$("#SubmitBtn", $form).length) {
              $('select.required', $form).prop('disabled', false);
              $form.append("<input id='SubmitBtn' type='hidden' name='From' value='Submit' />");
            }
          }
        });
      } catch(e) {
        commonDialogs.showError();
      }
    });
  }
}


function handleEmailResponse(data) {
            $('#tpFormDialog_btnSubmit').prop("disabled", true);
            commonDialogs.hideProgress();
            var o = getOptions();
            if (data.IsSuccess) {
                commonDialogs.showAck(ExampleMessages.ConfirmSendEmail);
                closeTpFormDialog();
                o.table.refresh();
            } else {
                var errors = data.ResponseModel;
                if (typeof (errors) === 'string') {
                    commonDialogs.showError(errors);
                } else {
                    helpForValidation.showErrors(errors);
                }
            }
        };

Answer 1

您可以通过向提交按钮添加禁用属性来禁用提交按钮。

$('input:submit').click(function(){
    console.log("Form is submiting.....");
    $('input:submit').attr("disabled", true);
});

演示：https://jsfiddle.net/Prakash_Thete/6qqgszs4/

Answer 2

您应该在ajax success 上执行此操作，以便在error 的情况下用户可以重新提交表单。 在您的情况下，它将位于 handleEmailResponse 函数内。

function handleMailResponse(){
    $('#btnSubmitId').prop("disabled", true);

    /* the rest of your code */
}