Question

我打算在对话框打开时隐藏jQuery UI dialog按钮中的按钮。然后我想在符合条件的情况下展示它。

我在open方法中编写了代码，该方法将添加一个css代码来禁用该按钮。我还尝试调用.show()和.hide()方法，但仍无效。

我不确定如何在jQuery中隐藏/显示按钮

这是我的代码

function initializeDialog(){ 

    //initialize the dialog box
    $(".ICWSinboundDialog").dialog({
        resizable: true,
        width: 500,
        modal: true,
        autoOpen: false,
        stack: false,
        open: function(){
            $('#btnAnswerAndShow').css("display","none");

        },
        buttons: [
            {
            id: "btnAnswerAndShow",
            text: "Answer - Display",
            click: function(e) {
                  //do something
                }
            },
            {
            id: "btnAnswer",
            text: "Answer",
            click: function(e) {
                    //do something

                }
            },
            {
            id: "btnVM",
            text: "Send to Voice Mail",
            click: function(e) {
                    //do something
                }
            },
            {
            id: "btnHold",
            text: "Hold",
            click: function(e) {
                //do something
                }
            }
        ]
    });
}

对话框的DIV是动态创建的，如此

        var prefix = 'ICWS_';
        var interactionId = '123456';
        var dialogID = '#' + prefix + interactionId;

        //create a dialog box if one does not already exists
        if( $(dialogID).length == 0) {
            $('#ICWSDialogs').append('<div class="ICWSinboundDialog icwsDialogWrapper" id="'+ prefix + interactionId +'" style="display: none;"></div>');
        } 
        //initialize the dialog after creating the new dialog
        initializeDialog();

然后在代码中我可以像这样打开这个对话框

if( $(dialogID).length > 0) {
     $(dialogID).dialog('open');
}

这是我的HTML标记

<div id="ICWSDialogs"></div>

Answer 1

尝试使用.css()

更改公开程度选项

$('#btnAnswerAndShow').css('visibility', 'hidden');

Answer 2

在您提供的上下文中，我认为问题来自于您未使用.dialog( "open" )打开对话框，因此open事件不会触发。因此，如果在初始化过程结束时添加.dialog( "open" )，一切都应该正常工作（使用各种方式显示或隐藏元素）。

我也不确定您为何style="display: none;"添加icwsDialogWrapper。你可能有充分的理由，但在现在给定的背景下，它没有必要，也许它甚至也会导致你的问题。所以你可以尝试删除它。

这是你的例子的一个小提示，一个对话框应该按你想要的方式工作（也检查答案按钮功能）。看看这是否对您有所帮助：https://jsfiddle.net/ad7f6ryv/

如何隐藏jQuery Dialog UI中的按钮？

2 个答案: