如何禁用 jQueryUI 对话框中的按钮？

按钮由类 ui-button标识。要禁用按钮:

$("#myButton").addClass("ui-state-disabled").attr("disabled", true);

除非您动态地创建对话框(这是可能的) ，否则您将知道按钮的位置。因此，要禁用第一个按钮:

$("#myButton:eq(0)").addClass("ui-state-disabled").attr("disabled", true);

ui-state-disabled类使按钮呈现出漂亮的暗淡风格。

你可以这样禁用第一个按钮，例如:

$('.ui-dialog-buttonpane button:first').attr('disabled', 'disabled');

如果你包含了 jQuery UI 包含的 .button()插件/小部件(如果你有完整的库并且是在1.8 + 上，你就有了) ，你可以使用它来禁用按钮 还有可视化地更新状态，像这样:

$(".ui-dialog-buttonpane button:contains('Confirm')").button("disable");

您可以在这里尝试一下 ... ... 或者如果您使用的是旧版本或者没有使用按钮小部件，您可以像这样禁用它:

$(".ui-dialog-buttonpane button:contains('Confirm')").attr("disabled", true)
.addClass("ui-state-disabled");

如果你想让它在一个特定的对话框中，比如说通过 ID，那么这样做:

$("#dialogID").next(".ui-dialog-buttonpane button:contains('Confirm')")
.attr("disabled", true);

在其他情况下，如果 :contains()可能会给出假阳性，那么你可以像这样使用 .filter()，但是这里有点过了，因为你知道你的两个按钮。如果在其他情况下也是这样，它看起来像这样:

$("#dialogID").next(".ui-dialog-buttonpane button").filter(function() {
return $(this).text() == "Confirm";
}).attr("disabled", true);

这将防止 :contains()匹配其他内容的子字符串。

我创建了一个 jQuery 函数来简化这个任务。也许现在有一个更好的解决办法... 不管怎样，这是我的两分钱。:)

只要把这个添加到您的 JS 文件中:

$.fn.dialogButtons = function(name, state){
var buttons = $(this).next('div').find('button');
if(!name)return buttons;
return buttons.each(function(){
var text = $(this).text();
if(text==name && state=='disabled') {$(this).attr('disabled',true).addClass('ui-state-disabled');return this;}
if(text==name && state=='enabled') {$(this).attr('disabled',false).removeClass('ui-state-disabled');return this;}
if(text==name){return this;}
if(name=='disabled'){$(this).attr('disabled',true).addClass('ui-state-disabled');return buttons;}
if(name=='enabled'){$(this).attr('disabled',false).removeClass('ui-state-disabled');return buttons;}
});};

禁用按钮“确定”的对话框与类“对话框”:

$('.dialog').dialogButtons('Ok', 'disabled');

启用所有按钮:

$('.dialog').dialogButtons('enabled');

启用“关闭”按钮并改变颜色:

$('.dialog').dialogButtons('Close', 'enabled').css('color','red');

所有红色按钮上的文字:

$('.dialog').dialogButtons().css('color','red');

希望这对你有帮助:)

看起来任何人，甚至在 这个相关的问题中，都提出了这个解决方案，类似于 Nick Craver 给出的答案的第一部分:

$("#dialog").dialog({
width: 480,
height: "auto",
buttons: [
{
id: "button-cancel",
text: "Cancel",
click: function() {
$(this).dialog("close");
}
},
{
id: "button-ok",
text: "Ok",
click: function() {
$(this).dialog("close");
}
}
]
});

然后，在其他地方，您应该能够使用 空气污染指数作为 jquery UI 按钮:

$("#button-ok").button("disable");

下面的工作从按钮点击功能:

$(function() {
$("#dialog").dialog({
height: 'auto', width: 700, modal: true,
buttons: {
'Add to request list': function(evt) {


// get DOM element for button
var buttonDomElement = evt.target;
// Disable the button
$(buttonDomElement).attr('disabled', true);


$('form').submit();
},
'Cancel': function() {
$(this).dialog('close');
}
}
});
}

function getDialogButton( jqUIdialog, button_names )
{
if (typeof button_names == 'string')
button_names = [button_names];
var buttons = jqUIdialog.parent().find('.ui-dialog-buttonpane button');
for (var i = 0; i < buttons.length; i++)
{
var jButton = $( buttons[i] );
for (var j = 0; j < button_names.length; j++)
if ( jButton.text() == button_names[j] )
return jButton;
}


return null;
}


function enableDialogButton( jqUIdialog, button_names, enable )
{
var button = getDialogButton( jqUIdialog, button_names );
if (button == null)
alert('button not found: '+button_names);
else
{
if (enable)
button.removeAttr('disabled').removeClass( 'ui-state-disabled' );
else
button.attr('disabled', 'disabled').addClass( 'ui-state-disabled' );
}
}

您可以覆盖按钮数组，只留下您需要的按钮。

$( ".selector" ).dialog( "option", "buttons", [{
text: "Close",
click: function() { $(this).dialog("close"); }
}] );

您还可以使用 没有现在记录的 disabled属性:

$("#element").dialog({
buttons: [
{
text: "Confirm",
disabled: true,
id: "my-button-1"
},
{
text: "Cancel",
id: "my-button-2",
click: function(){
$(this).dialog("close");
}


}]
});

若要在打开对话框后启用，请使用:

$("#my-button-1").attr('disabled', false);

http://jsfiddle.net/xvt96e1p/4/

我做事的方式是 取消: 函数(e){ $(e.target) . attr (“残疾”，“残疾”) ; }

这是我找到的最简单快捷的方法。

如果你使用击倒，那么这个更干净。想象你有以下:

var dialog = $('#my-dialog').dialog({
width: '100%',
buttons: [
{ text: 'Submit', click: $.noop, 'data-bind': 'enable: items() && items().length > 0, click: onSubmitClicked' },
{ text: 'Enable Submit', click: $.noop, 'data-bind': 'click: onEnableSubmitClicked' }
]
});


function ViewModel(dialog) {
var self = this;


this.items = ko.observableArray([]);


this.onSubmitClicked = function () {
dialog.dialog('option', 'title', 'On Submit Clicked!');
};


this.onEnableSubmitClicked = function () {
dialog.dialog('option', 'title', 'Submit Button Enabled!');
self.items.push('TEST ITEM');
dialog.text('Submit button is enabled.');
};
}


var vm = new ViewModel(dialog);
ko.applyBindings(vm, dialog.parent()[0]); //Don't forget to bind to the dialog parent, or the buttons won't get bound.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" />
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>


<div id="my-dialog">
Submit button is disabled at initialization.
</div>

魔法来自 JQuery UI 源代码:

$( "<button></button>", props )

您基本上可以通过按钮对象传递任何 jQuery 实例函数来调用它。

例如，如果您想使用 HTML:

{ html: '<span class="fa fa-user"></span>User' }

或者，如果您想向按钮添加一个类(您可以通过多种方式实现) :

{ addClass: 'my-custom-button-class' }

也许你是个疯子，当按钮悬浮在空中时，你想把它从按钮上取下来:

{ mouseover: function () { $(this).remove(); } }

我真的很惊讶，似乎没有人提到这一点，在无数的线程像这样..。

此代码禁用按钮与’您的 _ BUTTON _ LABEL’。您可以替换包含()中的名称。 让它失效

$(".ui-dialog-buttonpane button:contains('YOUR_BUTTON_LABEL')").button("disable");

用按钮的标签替换‘ YOUR _ BUTTON _ LABEL’。 使

$(".ui-dialog-buttonpane button:contains('YOUR_BUTTON_LABEL')").button("enable");

您可以在构建对话框时禁用一个按钮:

$(function() {
$("#dialog").dialog({
modal: true,
buttons: [
{ text: "Confirm", click: function() { $(this).dialog("close"); }, disabled: true },
{ text: "Cancel", click: function() { $(this).dialog("close"); } }
]
});
});

@import url("https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.min.css");

<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>


<div id="dialog" title="Confirmation">
<p>Proceed?</p>
</div>

或者您可以在创建对话框后随时禁用它:

$(function() {
$("#dialog").dialog({
modal: true,
buttons: [
{ text: "Confirm", click: function() { $(this).dialog("close"); }, "class": "confirm" },
{ text: "Cancel", click: function() { $(this).dialog("close"); } }
]
});
setTimeout(function() {
$("#dialog").dialog("widget").find("button.confirm").button("disable");
}, 2000);
});

@import url("https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.min.css");

<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>


<div id="dialog" title="Confirmation">
<p>Button will disable after two seconds.</p>
</div>

这招对我很管用

$("#dialog-confirm").html('Do you want to permanently delete this?');
$( "#dialog-confirm" ).dialog({
resizable: false,
title:'Confirm',
modal: true,
buttons: {
Cancel: function() {
$( this ).dialog( "close" );
},
OK:function(){
$('#loading').show();
$.ajax({
type:'post',
url:'ajax.php',
cache:false,
data:{action:'do_something'},
async:true,
success:function(data){
var resp = JSON.parse(data);
$("#loading").hide();
$("#dialog-confirm").html(resp.msg);
$( "#dialog-confirm" ).dialog({
resizable: false,
title:'Confirm',
modal: true,
buttons: {
Close: function() {
$( this ).dialog( "close" );
}
}
});
}
});
}
}
});