Question

我使用的是非常基本的jQuery Dialog：

$(function () {
$("#dialog-form").dialog({
                        height: 300,
                        width: 450,
                        modal: true,
                        buttons: {
                            "show-hide": function () {
                                $(this).dialog('destroy').empty();
                            },
                            "Start": function () {
                                $(this).dialog('destroy').empty();
                            },
                            "Abort": function () {
                                $(this).dialog('destroy').empty();
                            }
                        },
                        close: function () {
                            $(this).dialog('destroy').empty();
                        }
                    });
              })

这是一个JS Fiddle示例，即使这是非常基本的。因此，在我的实例中，如果满足某个条件，则应显示"show-hide"按钮。我最终想要达到的目标是：

         "show-hide": function () {
           if (someValue == true)
           {
            show button
           }
           else
           {
           hide button
           }
              $(this).dialog('destroy').empty();
         }

考虑这样的内联定义很可能无论如何都不会起作用。但是如何为这个特定的按钮实现这个逻辑呢？

Answer 1

您可以扩展按钮对象以有条件地添加或删除按钮

                buttons: $.extend( 
                           //replace false with your variable
                           (false) ? 
                           // if true, adds object with show-hide
                            {"show-hide" : function(){

                             } } : 
                            //else empty object
                            {},
                         //merge with buttons that are permanent
                        {
                        "Start": function () {
                            $(this).dialog('destroy').empty();
                        },
                        "Abort": function () {
                            $(this).dialog('destroy').empty();
                        }
                    })

http://jsfiddle.net/rh7tvdjb/2/

Answer 2

您可以通过jQuery-UI的Button-Widget访问Dialog中的按钮。

$("#dialog-form").dialog({
                    height: 300,
                    width: 450,
                    modal: true,
                    buttons: [{
                      'class' : 'yourClass'  
                       text: "show-hide",
                       click: function () {
                            $(this).dialog('destroy').empty();
                        } 
                    }]
                });
          });

我认为你可以在更新版本的jQuery-ui中为按钮添加特定的类。（类的引号是必要的，例如IE，因为它是一个保留的关键字）然后你可以这样做：

if(somevalue === false){
   $(".yourClass").button("disable");
}else{
   $(".yourClass").button("enable");
}

现在，您可以在条件范围内禁用和启用对话框的按钮。

如何在jquery对话框中有条件地显示隐藏按钮

2 个答案: