Jquery .dialog 在单击后禁用提交按钮

Question

我正在自定义一个wordpress主题。当用户单击提交按钮时，应将其禁用。

我不知道该怎么做。这是代码。有人可以告诉我如何做到这一点。

jQuery('.modal-content').dialog({
                autoOpen: false, 
                title: 'Confirm your Res', 
                resizable: false,
                height: 175,
                width: 300, 
                modal: true, 
                buttons: {
                    Submit: function() {                                    
                        jQuery('form[name="booking-form"]').get(0).submit();
                    }, 
                    Cancel: function() {
                        jQuery(this).dialog("close");
                    }
                }
            });

Answer 1

我在我的网站上使用此代码。

$("#dialog-alert").dialog({
    autoOpen: false,
    width: 320,
    modal: true,
    buttons: {
        Submit: function (e) {
            // Disable button
            $(e.target).attr("disabled", true);
            // Write your code here
            // Enable button
            $(e.target).removeAttr("disabled");
        }
    },
});

Answer 2

$('.submit').click(function(event) {
 event.preventDefault();
});

或查看

禁用表单提交时的提交按钮

Answer 3

提交表单后，这将"禁用"按钮：

jQuery('.modal-content').dialog({
            autoOpen: false, 
            title: 'Confirm your Res', 
            resizable: false,
            height: 175,
            width: 300, 
            modal: true, 
            buttons: {
                Submit: function() {                                    
                    jQuery('form[name="booking-form"]').get(0).submit($("form[name='booking-form'] input[type=submit]").attr("disabled", "disabled"));
                }, 
                Cancel: function() {
                    jQuery(this).dialog("close");
                }
            }
        });

Answer 4

一旦用户单击"确定"按钮，这将禁用弹出窗口上的所有按钮。

  $(popupHtml).dialog({
    title: "Add an Absence",
    width: 750,
    height: 300,
    buttons: {
        "Ok": function () {
            $(this).parent().find('button[role=button]').attr('disabled', 'disabled');
}

}

Answer 5

您还可以

包含禁用的样式以使它们看起来已禁用

buttons: {
    "Ok": function () {
        $(this).parent().find('button[role=button]').attr('disabled', 'disabled').addClass('ui-state-disabled');

或者，您可以创建自己的类，例如背景"加载"动画。