打开jQuery-ui对话框时如何隐藏对话框按钮答案

【问题标题】：How to hide dialog buttons when a jQuery-ui dialog is opened打开jQuery-ui对话框时如何隐藏对话框按钮
【发布时间】：2014-10-23 17:18:08
【问题描述】：

打开 jQuery-UI 对话框时，如何隐藏按钮（例如，隐藏“保存”按钮）？

http://jsfiddle.net/ba6jwh54/1/

<!-- head --> 
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/ui-lightness/jquery-ui.css" type="text/css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.js" type="text/javascript"></script>

<!-- body -->
<div id="dialog" class="dialog" title="My Title"></div>
<a href="#" id="open">open</a>

// javascript
$(document).ready(function() {
    $('#open').click(function() {
        $("#dialog").dialog("open");
    });
    $("#dialog").dialog({
        autoOpen: false,
        height: 400,
        width: 350,
        modal: true,
        open: function() {
            var dialog = $(this);
            console.log('dialog', dialog);
            var buttons = dialog.dialog("option", "buttons");
            console.log('buttons', buttons);
            //Change names this way...
            buttons[0].text = 'Save2';
            buttons[1].text = 'Cancel2';
            dialog.dialog("option", "buttons", buttons);
            //How do I hide a button (i.e. hide Save button)?
        },
        buttons: [{
            text: 'SAVE',
            click: function() {
                alert('save');
                $(this).dialog("close");
            }
        }, {
            text: 'CANCEL',
            click: function() {
                $(this).dialog("close");
            }
        }]
    });
});

【问题讨论】：

标签： jquery jquery-ui jquery-ui-dialog

【解决方案1】：

最简单的*方法是抓住当前对话框的widget 元素 和其中的.find() 按钮：

open: function () {
    var $widget = $(this).dialog("widget");
    $widget.find(".ui-dialog-buttonpane button:first").hide();
}

Updated Fiddle

^{比在页面上找到所有button 元素并猜测哪个是哪个更容易。}

【讨论】：

啊，我明白了。谢谢你。只是好奇，为什么不能对按钮对象进行操作呢？
按钮对象不引用对话框内的 HTML 按钮。它指的是用于生成（或重新生成）按钮的选项。
明白了！再次感谢
最好也使用小部件来更改名称，而不是像我那样做吗？
你可以，但我不确定。如果您直接更改按钮的文本（实际上是其中的跨度），$(".dialog").dialog("option", "buttons")[0].text 将包含一个 now-out-of-sync 值。

【解决方案2】：

我只是给按钮添加了一个id，并更新了点击函数来隐藏它。

$(document).ready(function () {

    $('#open').click(function () {
        $("#dialog").dialog("open");
        $("#save").hide();
    });

    $("#dialog").dialog({
        autoOpen: false,
        height: 400,
        width: 350,
        modal: true,
        open: function () {
            var dialog = $(this);
            console.log('dialog', dialog);
            var buttons = dialog.dialog("option", "buttons");
            console.log('buttons', buttons);
            //Change names this way...
            buttons[0].text = 'Save2';
            buttons[1].text = 'Cancel2';
            dialog.dialog("option", "buttons", buttons)
            //How do I hide a button (i.e. hide Save button)?
        },
        buttons: [{
            text: 'SAVE',
            id: "save",
            click: function () {
                alert('save');
                $(this).dialog("close");
            }
        }, {
            text: 'CANCEL',            
            click: function () {
                $(this).dialog("close");
            }
        }]
    });

});

http://jsfiddle.net/ba6jwh54/2/

【讨论】：

感谢 jroot，但出于维护目的，我想将其隐藏在对话脚本中。另外，不想为按钮添加 ID。