如何禁用jQuery对话框中的按钮

Question

如何禁用jQuery对话框中的按钮

jqueryjquery-uimodal-dialogjquery-ui-dialog

8

我的需求：我正在使用jquery模态对话框。上面有一些按钮。我想在对话框打开时禁用一个按钮，但是在执行某个特定操作后要启用它。

我的做法：我可以添加以下语句来禁用该按钮：jQuery(".ui-dialog-buttonpane button:contains('Issue')").attr("disabled", true).addClass("ui-state-disabled");。

问题：但现在我想实现的是，当编辑按钮被点击后，我执行某些操作，在执行完该操作后，“Issue”按钮变为启用状态。

我的代码如下：

 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");

- Awais Qarni

只需在编辑点击时将属性设置为false即可...你做到了吗？ - abhijit

不，你必须删除disabled属性才能使某些东西可用，仅仅存在该属性就会禁用输入。 - Nicola Peluchetti

@Nicola Peluchetti，请查看我编辑过的问题。 - Awais Qarni

4个回答

1

你可以这样做：

    "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')

- Nicola Peluchetti

谢谢您的回复。实际上，我正在编辑按钮上打开一个新的对话框。当新对话框关闭时，我想启用父对话框的“问题”按钮。我也已经编辑了我的问题。 - Awais Qarni

只有一个名为“issue”的按钮吗？如果是这样，请看一下我如何编辑我的答案。 - Nicola Peluchetti

1

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

        }

- Rafay

0

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

以下是改进此问题的几个步骤：第一步：找到对话框句柄。

$mydialog = $("#divfordialog");

第二步：找到按钮面板

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

第三步：找到目标按钮，假设该按钮的名称为BTN。

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

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

$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")
        }
    }
    ...
});

- hotrhino

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- mu is too short · Accepted Answer

不需要在按钮上搞乱类，这也可能不是个好主意。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选项相同的顺序从左到右列出。有各种方法可以获取第一个按钮：

我选择了:nth-child，它是CSS3选择器：

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

所以button:nth-child(1)是第一个按钮。我认为，如果你正在对一个按钮做某些事情，那么你可能最终会对其他按钮做同样的事情，因此，例如，你可以使用.ui-dialog button:nth-child(2)来获取"Edit"按钮，并且这将与用于"Issue"按钮的选择器相匹配。