如何禁用jquery对话框按钮

Question

我的需求:我正在使用jquery模式对话框.我有一些按钮.我希望在对话框打开时禁用一个按钮,但想要在某些特定操作后启用它.

我做了什么:我可以通过添加此语句来禁用该按钮jQuery(".ui-dialog-buttonpane button:contains('Issue')").attr("disabled", true).addClass("ui-state-disabled");.

问题:但现在我想要的是,当单击编辑按钮时,我执行一些操作,执行该操作后,"问题"按钮变为启用状态.

我的代码如下.

 jQuery(newdiv).dialog({
    width:500,
    height:275,
    dialogClass:'alert',
    modal: true,
    close: function(event, ui) { jQuery(newdiv).html(''); },
    buttons: {
        "issue":function()
        {

        },
        "Edit":function()
        {
          //here I am opening a new dialogue. When this child dialog is closed I want the `issue` button of parent dialogue to enablee.I have used this statement
          jQuery(this).find(".ui-dialog-buttonset button:contains('Issue')").removeAttr("disabled").removeClass("ui-state-disabled").addClass('ui-state-default');
        },
        "Cancel":function(){jQuery(this).dialog('close');},
    }
});
jQuery(".ui-dialog-titlebar").hide();
jQuery(".ui-widget-content").css({'background':'none','background-color':'#FFFFFF'});
jQuery(".ui-dialog-buttonpane button:contains('Issue')").attr("disabled", true).addClass("ui-state-disabled");

Answer 1

没有必要乱搞按钮上的类,无论如何它可能不是一个好主意.jQuery-UI对话框中的按钮是jQuery-UI按钮,它们支持通常的jQuery-UI样式disable和enable方法:

$button.button('enable');  // Enable the button
$button.button('disable'); // Disable the button

首先,替换这个:

jQuery(".ui-dialog-buttonpane button:contains('Issue')").attr("disabled", true).addClass("ui-state-disabled");

有了这个:

jQuery('.ui-dialog button:nth-child(1)').button('disable');

然后,在编辑处理程序中,执行以下操作:

jQuery('.ui-dialog button:nth-child(1)').button('enable');

启用按钮.

就选择器而言,主对话框<div>有一个ui-dialog类,所以我们从开始.ui-dialog.然后,我们想要对话框中的按钮,所以我们正在寻找<button>元素; 这给了我们.ui-dialog button.对话框中的按钮按照与对话框buttons选项相同的顺序从左到右列出.有多种方法可以获得第一个按钮:

• :first-child
• :first
• :nth-child

我去了哪个:nth-child是CSS3选择器:

的:nth-child(an+b)伪级符号代表具有一个元素an+b-1的兄弟姐妹之前它在文档树中,对于任何正整数或零值n,且具有父元素.

button:nth-child(1)第一个按钮也是如此.我认为,如果你正在为一个按钮做事,你可能最终会对其他按钮做事情,所以,例如,你可以做到.ui-dialog button:nth-child(2)"编辑"按钮,这将很好地与用于"问题"按钮.