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

How can I disable a button on a jQuery UI dialog?

提问by leora

How do I go about disabling a button on the jQuery UI dialog. I can't seem to find this in any of the documentation in the link above.

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

I have 2 buttons on the modal confirmation ("Confirm" and "Cancel"). In certain cases, I want to disable the "Confirm" button.

我在模式确认上有 2 个按钮（“确认”和“取消”）。在某些情况下，我想禁用“确认”按钮。

回答by Nicola Tuveri

Looks like anyone, even in this linked question, have proposed this solution, similar to the first part of the answer given by Nick Craver:

看起来任何人，即使在这个链接的问题中，也提出了这个解决方案，类似于 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");
            }
        }
    ]
});

Then, elsewhere, you should be able to use the APIfor the jquery UI button:

然后，在其他地方，您应该能够使用jquery UI 按钮的API：

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

回答by Nick Craver

If you're including the .button()plugin/widgetthat jQuery UI contains (if you have the full library and are on 1.8+, you have it), you can use it to disable the button andupdate the state visually, like this:

如果您要包含jQuery UI 包含的.button()插件/小部件（如果您拥有完整的库并且在 1.8+ 上，则拥有它），您可以使用它来禁用按钮并在视觉上更新状态，如下所示：

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

You can give it a try here...or if you're on an older version or not using the button widget, you can disable it like this:

你可以在这里试一试......或者如果你使用的是旧版本或不使用按钮小部件，你可以像这样禁用它：

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

---

---

If you want it inside a specific dialog, say by ID, then do this:

如果您想在特定对话框中使用它，例如通过 ID，请执行以下操作：

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

In other cases where :contains()might give false positives then you can use .filter()like this, but it's overkill here since you know your two buttons. Ifthat is the case in other situations, it'd look like this:

在其他:contains()可能会产生误报的情况下，您可以.filter()像这样使用，但这里是矫枉过正，因为您知道您的两个按钮。 如果在其他情况下也是这种情况，它看起来像这样：

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

This would prevent :contains()from matching a substring of something else.

这将阻止:contains()匹配其他内容的子字符串。

回答by Jér?me

You can also use the notnow documented disabledattribute:

您还可以使用尚未记录的disabled属性：

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

    }]
});

To enable after dialog has opened, use:

要在对话框打开后启用，请使用：

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

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

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

回答by Chris Pietschmann

The following works from within the buttons click function:

按钮单击功能中的以下工作：

$(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');
            }
        }
    });
}

回答by Ronny Sherer

function getDialogButton( jqUIdialog, button_names )
{
    if (typeof button_names == 'string')
        button_names = [button_names];
    var buttons = jqUIdialog.parent().find('.ui-dialog-buttonpane button');
    for (var i = 0; i < buttons.length; i++)
    {
        var jButton = $( buttons[i] );
        for (var j = 0; j < button_names.length; j++)
            if ( jButton.text() == button_names[j] )
                return jButton;
    }

    return null;
}

function enableDialogButton( jqUIdialog, button_names, enable )
{
    var button = getDialogButton( jqUIdialog, button_names );
    if (button == null)
        alert('button not found: '+button_names);
    else
    {
        if (enable)
            button.removeAttr('disabled').removeClass( 'ui-state-disabled' );
        else
            button.attr('disabled', 'disabled').addClass( 'ui-state-disabled' );
    }
}

回答by jfredys

You can overwrite the buttons array and left only the ones you need.

您可以覆盖按钮数组，只留下您需要的按钮。

$( ".selector" ).dialog( "option", "buttons", [{
    text: "Close",
    click: function() { $(this).dialog("close"); }
}] );

回答by Chris Laplante

A button is identified by the class ui-button. To disable a button:

按钮由类标识ui-button。要禁用按钮：

$("#myButton").addClass("ui-state-disabled").attr("disabled", true);

Unless you are dynamically creating the dialog (which is possible), you will know the position of the button. So, to disable the first button:

除非您动态创建对话框（这是可能的），否则您将知道按钮的位置。因此，要禁用第一个按钮：

$("#myButton:eq(0)").addClass("ui-state-disabled").attr("disabled", true);

The ui-state-disabledclass is what gives a button that nice dimmed style.

该ui-state-disabled班是什么让一个按钮，漂亮的灰色风格。

回答by sergiodlopes

I created a jQuery function in order to make this task a bit easier. Probably now there is a better solution... either way, here's my 2cents. :)

我创建了一个 jQuery 函数，以使这个任务更容易一些。可能现在有一个更好的解决方案……不管怎样，这是我的 2 美分。:)

Just add this to your JS file:

只需将其添加到您的 JS 文件中：

$.fn.dialogButtons = function(name, state){
var buttons = $(this).next('div').find('button');
if(!name)return buttons;
return buttons.each(function(){
    var text = $(this).text();
    if(text==name && state=='disabled') {$(this).attr('disabled',true).addClass('ui-state-disabled');return this;}
    if(text==name && state=='enabled') {$(this).attr('disabled',false).removeClass('ui-state-disabled');return this;}
    if(text==name){return this;}
    if(name=='disabled'){$(this).attr('disabled',true).addClass('ui-state-disabled');return buttons;}
    if(name=='enabled'){$(this).attr('disabled',false).removeClass('ui-state-disabled');return buttons;}
});};

Disable button 'Ok' on dialog with class 'dialog':

禁用“对话框”类对话框上的“确定”按钮：

$('.dialog').dialogButtons('Ok', 'disabled');

Enable all buttons:

启用所有按钮：

$('.dialog').dialogButtons('enabled');

Enable 'Close' button and change color:

启用“关闭”按钮并更改颜色：

$('.dialog').dialogButtons('Close', 'enabled').css('color','red');

Text on all buttons red:

所有按钮上的文字为红色：

$('.dialog').dialogButtons().css('color','red');

Hope this helps :)

希望这可以帮助 ：）

回答by Sumeet_Pol

this code disable the button with 'YOUR_BUTTON_LABEL'. you can replace name in contains(). to disable

此代码禁用带有“YOUR_BUTTON_LABEL”的按钮。您可以替换 contains() 中的名称。 禁用

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

replace 'YOUR_BUTTON_LABEL' with your button's label. to enable

将“YOUR_BUTTON_LABEL”替换为您按钮的标签。 启用

$(".ui-dialog-buttonpane button:contains('YOUR_BUTTON_LABEL')").button("enable");

回答by Salman A

You can disable a button when you construct the dialog:

您可以在构造对话框时禁用按钮：

$(function() {
  $("#dialog").dialog({
    modal: true,
    buttons: [
      { text: "Confirm", click: function() { $(this).dialog("close"); }, disabled: true },
      { text: "Cancel", click: function() { $(this).dialog("close"); } }
    ]
  });
});

@import url("https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.min.css");

<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>

<div id="dialog" title="Confirmation">
  <p>Proceed?</p>
</div>

Or you can disable it anytime after the dialog is created:

或者您可以在创建对话框后随时禁用它：

$(function() {
  $("#dialog").dialog({
    modal: true,
    buttons: [
      { text: "Confirm", click: function() { $(this).dialog("close"); }, "class": "confirm" },
      { text: "Cancel", click: function() { $(this).dialog("close"); } }
    ]
  });
  setTimeout(function() {
    $("#dialog").dialog("widget").find("button.confirm").button("disable");
  }, 2000);
});

@import url("https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.min.css");

<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>

<div id="dialog" title="Confirmation">
  <p>Button will disable after two seconds.</p>
</div>