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，它们支持通常的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选项相同的顺序列出。有多种方法可以获得第一个按钮：

我选择:nth-child这是一个CSS3选择器：

:nth-child(an+b)伪类表示法表示在文档树中具有an+b-1兄弟之前的元素，对于任何正整数或零值{{1} }，并且有一个父元素。

所以n是第一个按钮。我想如果你正在为一个按钮做事，你可能最终会对其他按钮做事情，所以，例如，你可以button:nth-child(1)来获得“编辑”按钮，这样可以很好地与用于“问题”按钮的选择器。

Answer 2

你可以这样做：

    "Edit":function()
    {
       //perform other actions
      jQuery(".ui-dialog-buttonset button:contains('Issue')").removeAttr("disabled").removeClass("ui-state-disabled").addClass('ui-state-default');
    },

请记住，无论您将属性设置为什么值，都会禁用已禁用属性的输入元素：$('input').attr('disabled', false)等于$('input').attr('disabled', 'disabled')

Answer 3

"Edit":function()
        {
       jQuery(".ui-dialog-buttonpane button:contains('Issue')")
             .removeAttr("disabled")
             .removeClass("ui-state-disabled")
             .addClass('ui-state-default');

        }

Answer 4

如果您在上下文中有其他对话框，这种方式 jQuery('.ui-dialog button:nth-child(1)').button('disable'); 可能会引起一些问题。

有一些步骤可以改善这一点： 1st：找到对话框句柄

$mydialog = $("#divfordialog");

第二名：找到按钮面板

$buttonPanel = $mydialog.siblings(".ui-dialog-buttonpane");

第3步：找到目标按钮，假设按钮的名称是BTN

$buttonwanttocontrol = $buttonPanel.find('button:contains("BTN")');

last：处理它（例如：禁用它，启用它）;

$buttonwanttocontrol.button("disable");
$buttonwanttocontrol.button("enable");

我们想要在打开时初始化对话框按钮状态，这样就可以找到：

$("divfordialog").dialog({
    ...
    buttons : {
        ...
        "BTN" : function () {},
        ...
    },
    open : function () {
        if (shouldDisableBtn()) {
            $(this).siblings(".ui-dialog-buttonpane").find('button:contains("BTN")').button("disable")
        }
    }
    ...
});

如何禁用jquery对话框按钮

4 个答案: