如何禁用 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，它们支持通常的 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) 来获得“编辑”按钮，这将与选择器很好地对齐用于“问题”按钮。

Answer 2

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

        }

Answer 3

你可以这样做：

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

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

Answer 4

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

有几个步骤可以改善这一点： 第一：找到对话框句柄

$mydialog = $("#divfordialog");

第二个：找到按钮面板

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

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

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

最后：处理它（例如：禁用它，启用它）；

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

我们想在对话框按钮打开时初始化它的状态，这将起作用 find：

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