如何禁用jquery对话框按钮

前端之家收集整理的这篇文章主要介绍了如何禁用jquery对话框按钮前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我的需求:我正在使用 jquery模式对话框.我有一些按钮.我想在对话框打开时禁用一个按钮,但想要在某些特定操作后启用它.

我做了什么:我可以通过添加这个statementjQuery来禁用该按钮(“.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");

解决方法

没有必要乱搞按钮上的类,无论如何它可能不是一个好主意. jQuery-UI对话框中的按钮是 jQuery-UI buttons,它们支持通常的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按钮.对话框中的按钮按从左到右的顺序列出,顺序与对话框的按钮选项相同.有多种方法可以获得第一个按钮:

> :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.

所以按钮:nth-​​child(1)是第一个按钮.我想如果你在一个按钮上做事,你可能最终会对其他按钮做事情,所以,例如,你可以做.ui-dialog按钮:nth-​​child(2)来获取“编辑”按钮这将与用于“问题”按钮的选择器很好地对齐.

猜你在找的jQuery相关文章