jquery - 如何禁用 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 buttons他们支持disable和enable通常的 jQuery-UI 风格的方法:

$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 选择器:

The :nth-child(an+b) pseudo-class notation represents an element that has an+b-1 siblings before it in the document tree, for any positive integer or zero value of n, and has a parent element.

所以button:nth-child(1)是第一个按钮。我认为，如果您对一个按钮执行操作，您最终可能会对其他按钮执行操作，因此，例如，您可以执行 .ui-dialog button:nth-child(2)获得“编辑”按钮，这将与用于“问题”按钮的选择器很好地对齐。