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


143

我该如何禁用jQuery UI对话框上的按钮。我似乎在上面链接的任何文档中都找不到。

我在模式确认中有2个按钮(“确认”和“取消”)。在某些情况下,我想禁用“确认”按钮。


请参阅本主题的答案:stackoverflow.com/questions/577548/...
埃里克·

5
@Erik-自从这些答案以来,情况有所改变,即由于使用了.button()插件,因此它们不一定是最好/最干净的解决方案。
尼克·克雷弗

Answers:


158

如果要包括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()匹配其他内容的子字符串。


next()对我不起作用,因为对话框和按钮范围之间存在所有“可调整大小”的div。因此,我使用了nextAll(),并将buttonPan与按钮分开:$("#dialogID").nextAll(".ui-dialog-buttonpane").find("button:contains('Confirm')").attr("disabled", true).addClass("ui-state-disabled");
Matthieu

请注意,由于按钮窗格不是对话框容器的子级,因此如果您的页面定义了多个对话框,则可能会出现问题。
布雷特·瑞安

具有优异的解决方案$(".ui-dialog-buttonpane button:contains('Confirm')").button("disable");但如果你想从你有这方面的功能禁用按钮,你必须widgetize该对话框,并禁用后该按钮; 像这样$(this).dialog("widget").find(".ui-dialog-buttonpane button:contains('Confirm')").button("disable");
子午线

3
请注意,如果您不想通过按钮的文本查询所需的按钮,则还可以为按钮提供一个类。jQuery UI的对话框支持一个带有按钮选项对象的数组,每个对象都包含有关按钮属性的信息。
丹尼斯

这对我有用:$(this).closest(“。ui-dialog”)。find(“ button:contains('Save')”)。prop(“ disabled”,true).addClass(“ ui-state-禁用”);
Adrian P.

217

看起来,即使在这个链接的问题中,也有人提出了这种解决方案,类似于尼克·克拉弗给出的答案的第一部分:

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

15
+1。我不确定为什么这个答案没有得到更多的投票。这是我遇到的最干净的,并且工作得很好。
道格·威尔逊

38
这需要在文档中...甚至不显示您可以为按钮分配ID。
杰伊·K

1
毫无疑问,这是最佳答案。还有其他解决方案,可以通过使用错误的选择器搜索按钮来实现。尼古拉干得好!
jnoreiga 2012年

4
同意:这是我认为UI团队应实施的解决方案...:+)您可以更快地做到:{text:"ok",disabled:true,click: function(){}}
Matthieu 2012年

10
这很棒!如果您担心id是唯一的,也可以使用“ class”代替“ id”。尽管您将需要多键入一些内容才能搜索按钮:$("#dialog").dialog("widget").find(".button-ok-class").button("enable")
desm

49

您还可以使用记录的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/


不是没有记录在案。就是在处理按钮时,对象的所有属性都针对它们的jQuery属性等效项执行。例如,attr: { 'data-value' : 'some value here' }如果要将属性添加data-value到按钮,则可以添加。
暗恋

2
不再没有记录。是官方的。
Salman A

该解决方案比更流行的版本更优雅。这使您具有所有灵活性,而不会出现大量定义的选择器的问题。
KimvdLinde

请注意,disabled创建按钮时必须分配属性。
user1032531 2015年

试图投票,但我在4个小时前投票,但不能这样做。该解决方案似乎不再正常工作。
2015年

7

从按钮单击功能中可以进行以下操作:

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

但是您必须先单击以使其变灰。
马特

1

按钮由班级标识ui-button。禁用按钮:

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

除非您动态创建对话框(可能),否则您将知道按钮的位置。因此,要禁用第一个按钮:

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

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


1

我创建了一个jQuery函数,以使此任务更容易一些。也许现在有一个更好的解决方案……无论哪种方式,这就是我的2美分。:)

只需将其添加到您的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;}
});};

在类为“ dialog”的对话框上禁用按钮“ Ok”:

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

启用所有按钮:

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

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

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

所有按钮上的文字均为红色:

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

希望这可以帮助 :)


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

1

您可以覆盖按钮数组,而只保留所需的按钮。

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

1

此代码通过“ YOUR_BUTTON_LABEL”禁用按钮。您可以在contains()中替换名称。 禁用

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

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

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


0

我的方式是 Cancel: function(e) { $(e.target).attr( "disabled","disabled" ); }

这是我发现的最短和最简单的方法。


0

如果您使用的是淘汰赛,那么这会更清洁。假设您具有以下条件:

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>

魔术来自jQuery UI来源

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

您基本上可以通过将其传递给按钮对象来调用ANY jQuery实例函数。

例如,如果要使用HTML:

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

或者,如果要向按钮添加类(可以通过多种方式执行此操作):

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

也许您疯了,并且想要将鼠标悬停在dom上时将其从dom中移除:

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

我真的很惊讶,似乎没有人在如此众多的线程中提到这一点……


0

这对我有用-

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

0

构造对话框时,可以禁用按钮:

$(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>

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

$(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>

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.