微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

如何禁用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)来获取“编辑”按钮这将与用于“问题”按钮的选择器很好地对齐.

原文地址:https://www.jb51.cc/jquery/178964.html

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐