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

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.

我有两个按钮的模态确认(“确认”和“取消”)。在某些情况下，我想禁用“确认”按钮。

14 个解决方案

#1

If you're including the .button() plugin/widget that 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 and update 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. If that is the case in other situations, it'd look like this:

在其他情况下:包含()可能会给出假阳性，然后您可以使用.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.

这将防止:包含()与其他的子字符串相匹配。

#2

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 API for the jquery UI button:

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

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

#3

You can also use the not now documented disabled attribute:

您还可以使用未被记录的禁用属性:

$("#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/

#4

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

#5

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

按钮由类ui按钮标识。禁用一个按钮:

$("#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-disabled class is what gives a button that nice dimmed style.

“ui-state-disabled”类提供了一个漂亮的调暗风格的按钮。

#6

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':

在对话框中禁用“Ok”按钮:

$('.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 :)

希望这有助于:)

#7

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

#8

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

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

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

#9

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");

#10

You could do this to disable the first button for example:

你可以这样来禁用第一个按钮，例如:

$('.ui-dialog-buttonpane button:first').attr('disabled', 'disabled');

#11

The way I do it is Cancel: function(e) { $(e.target).attr( "disabled","disabled" ); }

我的做法是取消:函数(e) {$(.target)。attr(“残疾”、“禁用”);}

This is the shortest and easiest way I found.

这是我找到的最短最简单的方法。

#12

If you're using knockout, then this even cleaner. Imagine you have the following:

如果你用的是击倒，那么这个更干净。假设你有以下几点:

var dialog = $('#my-dialog').dialog({
    width: '100%',
    buttons: [
        { text: 'Submit', click: $.noop, 'data-bind': 'enable: items() && items().length > 0, click: onSubmitClicked' },
        { text: 'Enable Submit', click: $.noop, 'data-bind': 'click: onEnableSubmitClicked' }
    ]
});

function ViewModel(dialog) {
    var self = this;

    this.items = ko.observableArray([]);

    this.onSubmitClicked = function () {
        dialog.dialog('option', 'title', 'On Submit Clicked!');
    };

    this.onEnableSubmitClicked = function () {
        dialog.dialog('option', 'title', 'Submit Button Enabled!');
        self.items.push('TEST ITEM');
        dialog.text('Submit button is enabled.');
    };
}

var vm = new ViewModel(dialog);
ko.applyBindings(vm, dialog.parent()[0]); //Don't forget to bind to the dialog parent, or the buttons won't get bound.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" />
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>

<div id="my-dialog">
  Submit button is disabled at initialization.
</div>

The magic comes from the jQuery UI source:

魔术来自jQuery UI源代码:

$( "<button></button>", props )

You can basically call ANY jQuery instance function by passing it through the button object.

您可以通过通过按钮对象来调用任何jQuery实例函数。

For example, if you want to use HTML:

例如，如果您想使用HTML:

{ html: '<span class="fa fa-user"></span>User' }

Or, if you want to add a class to the button (you can do this multiple ways):

或者，如果您想为按钮添加一个类(您可以通过多种方式):

{ addClass: 'my-custom-button-class' }

Maybe you're nuts, and you want to remove the button from the dom when it's hovered:

也许你疯了，当你想从dom中移除它的时候，当它盘旋的时候:

{ mouseover: function () { $(this).remove(); } }

---

I'm really surprised that no one seems to have mentioned this in the countless number of threads like this...

我真的很惊讶没有人在这么多的线程中提到这个…

#13

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("http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.min.css");

<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://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("http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.min.css");

<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://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>

#14

This worked for me --

这对我很有效。

$("#dialog-confirm").html('Do you want to permanently delete this?');
$( "#dialog-confirm" ).dialog({
    resizable: false,
    title:'Confirm',
    modal: true,
    buttons: {
        Cancel: function() {
            $( this ).dialog( "close" );
        },
        OK:function(){
            $('#loading').show();
            $.ajax({
                    type:'post',
                    url:'ajax.php',
                    cache:false,
                    data:{action:'do_something'},
                    async:true,
                    success:function(data){
                        var resp = JSON.parse(data);
                        $("#loading").hide();
                        $("#dialog-confirm").html(resp.msg);
                        $( "#dialog-confirm" ).dialog({
                                resizable: false,
                                title:'Confirm',
                                modal: true,
                                buttons: {
                                    Close: function() {
                                        $( this ).dialog( "close" );
                                    }
                                }
                        });
                    }
                });
        }
    }
});