logo标签列表

如何在jQuery UI对话框中禁用按钮？

jqueryjquery-uijquery-ui-dialog
145
请参考此线程中的答案：https://dev59.com/HnRB5IYBdhLWcg3wl4Oc - Erik
5
自那些回答以来情况有了一些变化，特别是由于.button()插件的存在，因此它们不一定是最佳/最干净的解决方案了。 - Nick Craver
14个回答
220

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

那么，在其他地方，您应该能够使用jQuery UI按钮的API：

$("#button-ok").button("disable");
15
我不确定为什么这个答案没有得到更多的投票。它是我见过最简洁、最有效的答案了。 - Doug Wilson
39
需要在文档中加入这一内容，甚至没有显示出可以给按钮分配id的选项。 - Jay K
1
这无疑是最好的答案。有其他解决方案通过使用错误的选择器来搜索按钮。做得好，尼古拉！ - jnoreiga
4
同意：这正是我认为UI团队应该实现的解决方案...:+)你甚至可以更快：{text:"确定",disabled:true,click: function(){}}。 - Matthieu
10
太好了！如果你担心id不唯一，也可以使用“class”代替“id”。不过为了搜索按钮，你需要多输入一点：$("#dialog").dialog("widget").find(".button-ok-class").button("enable")。 - desm
显示剩余4条评论
159
如果你包含了jQuery UI中的（如果你有完整的库并且版本在1.8以上，那么你就有它），你可以使用它来禁用按钮并更新其视觉状态，像这样：
```javascript $( "#myButton" ).button( "disable" ); ```
返回结果为：

如果你包含了.button()插件/小部件，你可以使用它来禁用按钮并更新其视觉状态，例如：

```javascript $( "#myButton" ).button( "disable" ); ```
$(".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 与 button 分开：$("#dialogID").nextAll(".ui-dialog-buttonpane").find("button:contains('确认')").attr("disabled", true).addClass("ui-state-disabled"); - Matthieu
请注意，由于按钮窗格不是对话框容器的子元素，如果您的页面定义了多个对话框，可能会出现问题。 - Brett Ryan
优秀的解决方案是 $(".ui-dialog-buttonpane button:contains('Confirm')").button("disable");，但如果你想从一个已有的函数中禁用该按钮，则需要将对话框_widgetize_并在此之后禁用该按钮；像这样 $(this).dialog("widget").find(".ui-dialog-buttonpane button:contains('Confirm')").button("disable");。 - meridius
3
请注意，如果您不想通过文本查询所需的按钮，还可以给按钮分配一个类；jQuery UI 的对话框支持一个对象数组来设置按钮选项，每个对象包含关于按钮属性的信息。 - Dennis
可能应该使用 prop 而不是 attr。 - Joe Mabel
显示剩余2条评论
51

您也可以使用现在已记录的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属性。例如，如果您想要添加属性"data-value"到按钮上，可以添加attr: {'data-value'：'some value here'}。 - crush
2
不再是未记录的了。现在已经正式宣布。 - Salman A
这个解决方案比更流行的版本更加优雅。这样可以让您拥有所有的灵活性，而不会出现模糊定义选择器的问题。 - KimvdLinde
请注意：在创建按钮时必须分配 disabled 属性。 - user1032531
尝试踩一下，但我在4小时前点了赞，现在无法这样做。这个解决方案似乎不再正常工作。 - user1032531
我刚在1.11.4版本中尝试了一下，这个答案对我来说效果最好。即使对话框已经创建，它仍然有效。我使用了：disabled: function() { return aaa == bbb; }，并且它在打开时正确地进行了评估。 - adg
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');
            }
        }
    });
}
但是在它变灰之前，你必须点击。 - Matt
2

这段代码禁用了带有“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");
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
我创建了一个jQuery函数，以使这个任务变得更容易。也许现在有更好的解决方案...无论如何，这是我的意见：)

只需将以下内容添加到您的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”的对话框上的“确定”按钮：
$('.dialog').dialogButtons('Ok', 'disabled');

启用所有按钮：

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

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

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

所有按钮上的文本都是红色：

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

希望这能有所帮助 :)
1
一个按钮可以通过类名 ui-button 进行识别。如果要禁用此按钮：
$("#myButton").addClass("ui-state-disabled").attr("disabled", true);

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

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

ui-state-disabled类是使按钮具有漂亮的暗淡样式的关键。

0
如果您正在使用knockout，那么这将更加简洁。想象一下您有以下内容： 

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 )

你可以通过将其传递到按钮对象中来调用任何jQuery实例函数。

例如，如果你想使用HTML：

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

或者，如果你想给按钮添加一个类（你可以用多种方式实现）：

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

也许你有点疯狂，想要在鼠标悬停时从 DOM 中移除按钮：
{ mouseover: function () { $(this).remove(); } }

我真的很惊讶，在无数像这样的帖子中，似乎没有人提到过这个...

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接