Javascript 通过编程禁用jquery ui对话框上的按钮，直到ajax调用完成？

我正在使用，其中一个按钮会导致ajax调用，这需要几秒钟的时间，因此我希望在单击按钮后禁用该按钮，直到ajax调用返回（然后我将启用它）

通过谷歌搜索，我看到一些人在问这个问题，但答案似乎非常过时和粗糙（基于非常旧版本的jQueryUI）。所以我希望现在有一种更优雅的方式来做这件事

如何以编程方式禁用或启用jquery ui对话框上的按钮？

使用以下方法：

$("#dialog-message").dialog({
    modal: true,
    draggable: false,
    resizable: false,
    position: ['center', 'top'],
    show: 'blind',
    hide: 'blind',
    width: 400,
    dialogClass: 'ui-dialog-osx',
    buttons: {
        "I've read and understand this": function() {
            $(this).dialog("close");
        }
    },
    open: function( event, ui ) {
        //disabling button after 3 seconds
        //for all buttons
        setTimeout("$('.ui-button').attr('disabled', 'disabled')", 3000);
        //for first button
        setTimeout("$('.ui-button').first().attr('disabled', 'disabled')", 3000);
    }
});

查看演示：

---

在这种情况下，按钮在3秒钟后被编程禁用。

我想这就是您想要的：

• 按下的按钮将被禁用
• 延迟承诺将一直等到

  ajax（）

  调用完成
• 然后，延迟操作将重新启用按钮

：：

---

您应该能够将按钮从事件参数获取到按钮的回调函数并禁用它。然后将按钮保存在变量中，并在ajax请求的回调中重新启用

例如，对于HTML：

<div id="dialog">
    <div id="message">
       Some text
    </div>
</div>

在ajax请求运行时，单击的按钮被禁用，在它响应时再次启用（您应该添加一个错误处理程序以及colurse）。我添加了计数器来说明这一点——当按钮被禁用时单击不会产生任何效果

---

在

中查看它的工作情况您可以找到要更改的按钮，如下所示：

var dialog = $("#dialog-message").dialog({
    modal: true,
    draggable: false,
    resizable: false,
    position: ['center', 'top'],
    show: 'blind',
    hide: 'blind',
    width: 400,
    dialogClass: 'ui-dialog-osx',
    buttons: {
        "I've read and understand this": function() {

           return true;
        },
        "Another Button" :function(){return true;}

    }

});


var buttons = dialog.parent().find("button");
$(buttons[0]).click(function() {
        $(buttons[0]).prop('disabled', true);
        $.ajax({
                url: "...",
                type: "post", contentType: "application/json",
                success: function (result) {

                       $(buttons[0]).prop('disabled', false);

                }
            });
        });

---

但是你的代码会禁用每个按钮。我只想为第一个按钮禁用一个按钮：$（'.ui button'）.first（）.attr（'disabled'，'disabled'）。即使是“first”变量也会禁用页面上的第一个.ui按钮，不是在该对话框中吗？还有一个问题是在点击按钮时禁用它，然后在得到答案时重新启用它。在给定时间后不禁用所有按钮（无论是否单击）。这是一个很好的解决方案，但针对另一个问题：）请共享jquery ajax调用源代码以及与按钮的绑定；这将帮助我为您所需要的创建一个实现，只需在启动ajax调用之前禁用该按钮，然后在得到ajax结果后重新启用它..点击chap！除了

$（'this'）

应该是

$（this）

。如果我错了，请纠正我，但是

$（'this'）

将查找DOM元素

@Adjit，非常好。这就是我剪切粘贴得到的！很乐意帮忙！：）我们都是剪切粘贴错误的受害者，现在你应该真正使用

prop（）

而不是

attr（）

/

removeAttr（）

。然而，主要的问题是OP想要在jQueryUI对话框上启用7禁用一个按钮。这些按钮是通过

.dialog（）

调用以编程方式创建的，没有可预见的ID可绑定to@DaveA：不，他们不想禁用所有按钮（如我所读）。他们希望在单击某个按钮时禁用该按钮。我发表评论时，您的帖子是通过ID（

$（“#btnDoAjax”）绑定的。单击（函数（…

），我的评论是，jQuery UI对话框上的按钮没有要绑定的ID。结果证明jQuery有一个“disable（true | false）”方法。这比attr（纯JQ方式总是感觉更好）更有效.我还更改了选择器以使用该按钮类和预期文本。再次感谢您的帮助，伙计。您的回答帮助了我。+1感谢您的所有见解！

var n = 0;
$("#dialog").dialog({
    modal: true,
    buttons: {
        "Close": function() {
            $(this).dialog("close");
        },
        'Slow': function(e){
            n++;
            $('#message').html('Fetching...' + n + '...');
            var button_clicked = $(e.currentTarget);
            button_clicked.prop('disabled', true);
            $.ajax({
                url: '/echo/html/',
                type: 'POST',
                dataType: 'html',
                data: {
                    html: 'Updated text',
                    delay: 3
                },
                success: function(data){
                    $('#message').html(data);
                    button_clicked.prop('disabled', false);
                }
            });
        }
    }
});

var dialog = $("#dialog-message").dialog({
    modal: true,
    draggable: false,
    resizable: false,
    position: ['center', 'top'],
    show: 'blind',
    hide: 'blind',
    width: 400,
    dialogClass: 'ui-dialog-osx',
    buttons: {
        "I've read and understand this": function() {

           return true;
        },
        "Another Button" :function(){return true;}

    }

});


var buttons = dialog.parent().find("button");
$(buttons[0]).click(function() {
        $(buttons[0]).prop('disabled', true);
        $.ajax({
                url: "...",
                type: "post", contentType: "application/json",
                success: function (result) {

                       $(buttons[0]).prop('disabled', false);

                }
            });
        });