如何禁用jQuery UI对话框上的按钮？

Question

如何禁用jQuery UI对话框上的按钮.我似乎无法在上面链接的任何文档中找到它.

我在模态确认上有2个按钮("确认"和"取消").在某些情况下,我想禁用"确认"按钮.

Answer 1

看起来任何人,即使在这个相关问题中,都提出了这个解决方案,类似于Nick Craver给出的答案的第一部分:

$("#dialog").dialog({
    width: 480,
    height: "auto",
    buttons: [
        {
            id: "button-cancel",
            text: "Cancel",
            click: function() {
                $(this).dialog("close");
            }
        },
        {
            id: "button-ok",
            text: "Ok",
            click: function() {
                $(this).dialog("close");
            }
        }
    ]
});

然后,在其他地方,您应该能够将API用于jquery UI按钮:

$("#button-ok").button("disable");

Answer 2

如果你包含jQuery UI包含的.button()插件/小部件(如果你有完整的库并且是1.8+,那么你可以使用它),你可以使用它来禁用按钮并直观地更新状态,如下所示:

$(".ui-dialog-buttonpane button:contains('Confirm')").button("disable");

你可以在这里尝试一下 ......或者如果你使用旧版本或不使用按钮小部件,你可以像这样禁用它:

$(".ui-dialog-buttonpane button:contains('Confirm')").attr("disabled", true)
                                              .addClass("ui-state-disabled");

如果你想在特定的对话框中,比如ID,那么这样做:

$("#dialogID").next(".ui-dialog-buttonpane button:contains('Confirm')")
              .attr("disabled", true);

在其他:contains()可能会出现误报的情况下,你可以.filter()像这样使用,但是因为你知道你的两个按钮,所以这里有点过头了. 如果在其他情况下就是这种情况,它看起来像这样:

$("#dialogID").next(".ui-dialog-buttonpane button").filter(function() {
  return $(this).text() == "Confirm";
}).attr("disabled", true);

这将阻止:contains()匹配其他东西的子串.

Answer 3

您还可以使用not now recorded disabled属性:

$("#element").dialog({
    buttons: [
    {
        text: "Confirm",
        disabled: true,
        id: "my-button-1"
    }, 
    {
        text: "Cancel",
        id: "my-button-2",
        click: function(){            
               $(this).dialog("close");
        }  

    }]
});

要在对话框打开后启用,请使用:

$("#my-button-1").attr('disabled', false);

JsFiddle:http://jsfiddle.net/xvt96e1p/4/

Answer 4

以下是按钮单击功能中的工作原理:

$(function() {
    $("#dialog").dialog({
        height: 'auto', width: 700, modal: true,
        buttons: {
            'Add to request list': function(evt) {

                // get DOM element for button
                var buttonDomElement = evt.target;
                // Disable the button
                $(buttonDomElement).attr('disabled', true);

                $('form').submit();
            },
            'Cancel': function() {
                $(this).dialog('close');
            }
        }
    });
}