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

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的。

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

我认为您可以在新版本的jQuery中向按钮添加特定的类。(类周围的引号对于例如IE是必要的，因为它是一个保留关键字)然后您可以这样做：

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

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