我有一个jQuery对话框，要求用户输入某些信息。在这种形式中，我有一个“继续”按钮。我希望这个“继续”按钮只有在所有字段都包含内容后才能启用，否则它将保持禁用状态。
我编写了一个函数，每当字段状态发生变化时调用该函数。但是，我不知道如何从此功能启用和禁用对话框按钮。我该怎么办？
哎呀，我忘了提到这些按钮创建如下：
$(function() {
$("#dialog").dialog({
bgiframe: true,
height: 'auto',
width: 700,
show: 'clip',
hide: 'clip',
modal: true,
buttons: {
'Add to request list': function() {
$(this).dialog('close');
$('form').submit();
},
'Cancel': function() {
$(this).dialog('close');
}
}
})
});
答案 0 :(得分：258)
您需要设置disabled property
$('#continueButton').attr("disabled", true);
更新：啊哈，我现在看到了复杂性。 jQuery Dialog有一行可供使用（在“按钮”部分下。
var buttons = $('.selector').dialog('option', 'buttons');
您需要从对话框中获取按钮集合，循环查找所需的按钮集合，然后按照上面的显示设置禁用的属性。
答案 1 :(得分：190)
这很简单：
$(":button:contains('Authenticate')").prop("disabled", true).addClass("ui-state-disabled");
答案 2 :(得分：38)
你完成了一项复杂的任务; jQueryUI对话框有两种设置按钮的方法。
如果您只需要为每个按钮设置单击处理程序，请使用带有Object参数的选项。要禁用按钮并提供其他属性，请使用带有Array参数的选项。
以下示例将禁用按钮，并通过应用所有jQueryUI CSS类和属性来正确更新其状态。
第1步 - 使用Array按钮创建对话框：
// Create a dialog with two buttons; "Done" and "Cancel".
$(".selector").dialog({ buttons: [
{
id: "done"
text: "Done",
click: function() { ... }
},
{
id: "cancel"
text: "Cancel",
click: function() { ... }
}
] });
步骤2 - 在创建对话框后启用/禁用“完成”按钮：
// Get the dialog buttons.
var dialogButtons = $( ".selector" ).dialog("option", "buttons");
// Find and disable the "Done" button.
$.each(buttons, function (buttonIndex, button) {
if (button.id === "done") {
button.disabled = true;
}
})
// Update the dialog buttons.
$(".selector").dialog("option", "buttons", dialogButtons);
答案 3 :(得分：31)
如果您创建一个提供按钮ID的对话框，
$("#dialog").dialog({ buttons: [ {
id: "dialogSave",
text: "Save",
click: function() { $(this).dialog("close"); }
},
{
id: "dialogCancel",
text: "Cancel",
click: function() { $(this).dialog("close");
}
}]});
我们可以使用以下代码禁用按钮：
$("#dialogSave").button("option", "disabled", true);
答案 4 :(得分：29)
我希望能够按名称找到按钮（因为我的jQuery UI对话框中有几个按钮）。我在页面上也有几个对话框，所以我需要一种方法来获取特定对话框的按钮。这是我的功能：
function getDialogButton( dialog_selector, button_name )
{
var buttons = $( dialog_selector + ' .ui-dialog-buttonpane button' );
for ( var i = 0; i < buttons.length; ++i )
{
var jButton = $( buttons[i] );
if ( jButton.text() == button_name )
{
return jButton;
}
}
return null;
}
// create the dialog
$('#my_dialog').dialog( dialogClass : 'dialog1',
buttons: {
Cancel: function() { $(this).dialog('close'); },
Submit: function() { ... }
} );
// now programmatically get the submit button and disable it
var button = getDialogButton( '.dialog1', 'Submit' );
if ( button )
{
button.attr('disabled', 'disabled' ).addClass( 'ui-state-disabled' );
}
答案 5 :(得分：19)
这会禁用按钮：
var firstButton=$('.ui-dialog-buttonpane button:first');
firstButton.addClass('ui-state-disabled');
如果页面上有多个对话框，则必须添加对话框ID。
答案 6 :(得分：11)
以下是修改后的问题中的示例，以便在点击后禁用该按钮：
$(function() {
$("#dialog").dialog({
bgiframe: true,
height: 'auto',
width: 700,
show: 'clip',
hide: 'clip',
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');
}
}
});
}
此外，以下问题对此也有帮助： How can I disable a button on a jQuery UI dialog?
答案 7 :(得分：9)
我使用方法.dialog("widget")，它返回对话框DIV本身。如果你在对话框方法中：
$(this)
.dialog("widget")
.find("button")
.addClass("ui-state-disabled") // for the style
.attr("disabled", true);
答案 8 :(得分：8)
从可用性的角度来看，通常最好让按钮保持启用状态，但如果有人试图提交不完整的表单，则会显示错误消息。当我想点击的按钮被禁用时，它会让我感到疯狂，并且没有任何线索可以解释原因。
答案 9 :(得分：8)
我找到了一种在对话框按钮上禁用（或执行任何其他操作）的简单方法。
var dialog_selector = "#myDialogId";
$(dialog_selector).parent().find("button").each(function() {
if( $(this).text() == 'Bin Comment' ) {
$(this).attr('disabled', true);
}
});
您只需选择对话框的父级并找到所有按钮。然后检查按钮的文本，可以识别按钮。
答案 10 :(得分：6)
试试这个：
$('button:eq(0)',$('#dialog_id').dialog.buttons).button('disable');
答案 11 :(得分：5)
$("#dialog").dialog({
buttons: {
'Ok': function(e) { $(e.currentTarget).button('disable'); }
}
});
看来你们都不知道参数中有一个事件对象......
顺便说一下，它只是从回调中访问按钮，一般情况下，最好添加一个访问ID
答案 12 :(得分：5)
这是我的jQuery对话框的enableOk函数：
function enableOk(enable)
{
var dlgFirstButton = $('.ui-dialog-buttonpane').find('button:first');
if (enable) {
dlgFirstButton.attr('disabled', '');
dlgFirstButton.removeClass('ui-state-disabled');
} else {
dlgFirstButton.attr('disabled', 'disabled');
dlgFirstButton.addClass('ui-state-disabled');
}
}
“第一个”按钮是最右边的按钮。您可以禁用该按钮并设置对话框的禁用类，以获得正确的视觉效果。
答案 13 :(得分：5)
在传统的jQuery UI（版本1.7.3）中，我只能使用
$('.ui-dialog-buttonpane button')[0].disabled=true;
只是禁用DOM元素本身的按钮。现在我们已经升级到更新的jQuery UI（版本1.8.7），该方法在Firefox中不再有效，但我可以简单地调用jquery UI按钮特定的禁用和启用按钮jquery对象上的函数：
$('.ui-dialog-buttonpane button').eq(0).button('disable');
答案 14 :(得分：4)
我找到了一个可能适用于尝试做类似事情的人的解决方法。我没有禁用按钮，而是在函数中添加了一个简单的if语句来检查是否选中了复选框。
如果不是，则显示一条简单的消息，说明在提交之前必须检查该框。
例如：
$("#confirmation-dialog").dialog({
modal: true,
autoOpen: false,
width: 600,
overlay: {
backgroundColor: '#000',
opacity: 0.5
},
close: function() {
$('input[type="submit"]')
.val('Record Reading')
.attr('disabled', false);
},
buttons: {
'Confirm Reading': function() {
if($('#check-box').attr("checked")){
$(this).dialog('close')
$('form')
.addClass('confirmed')
.submit();
}
else {
$('#please-check').show("slide");
}
}
}
});
无论如何，我希望能有所帮助。
答案 15 :(得分：4)
我创建了一个jQuery函数，以使这个任务更容易一些。只需将其添加到您的JavaScript文件中：
$.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');
我希望这会有所帮助。
答案 16 :(得分：4)
如果你真的想要禁用一个按钮，我发现你还需要在它上面调用.unbind（）方法。否则按钮可能仍处于活动状态，双击可能会导致多个表单提交。以下代码适用于我：
button = $(this).parent().find("button:contains('OK')");
button.unbind();
button.addClass('ui-state-disabled');
答案 17 :(得分：3)
我创建了一个类似于Nick的功能，但是我的方法不需要设置dialogClass，你可以通过id获取特定对话框的按钮（如果应用程序中存在多个）
function getDialogButton( dialog_id, button_name) {
var target = '#'+dialog_id;
var buttons = $(target).parent().find('button');
for ( var i=0; i<buttons.length; ++i ) {
var jButton = $( buttons[i] );
if ( jButton.text() == button_name ) {
return jButton;
}
}
return null;
}
所以如果你创建了这样的对话框：
$(function() {
$("#myDialogBox").dialog({
bgiframe: true, height: 'auto', width: 700, modal: true,
buttons: {
'Add to request list': function() {
$(this).dialog('close');
$('form').submit();
},
'Cancel': function() {
$(this).dialog('close');
}
}
});
您可以通过执行以下操作来获取按钮：
var addToRequestListBtn = getDialogButton('myDialogBox','Add to request list');
var cancelBtn = getDialogButton('myDialogBox','Cancel');
要禁用：
addToRequestListBtn.attr('disabled', true).addClass( 'ui-state-disabled');
cancelBtn.attr('disabled', true).addClass( 'ui-state-disabled');
启用：
addToRequestListBtn.attr('disabled', false).removeClass( 'ui-state-disabled');
cancelBtn.attr('disabled', false).removeClass( 'ui-state-disabled');
答案 18 :(得分：3)
不幸的是，这里给出的解决方案没有在页面上的几个对话框中工作。
另外问题是原始对话框本身不包含按钮窗格，但它是它的兄弟。
所以我想出了像对话框这样选择的对象：
var getFirstDialogButton = function (dialogSelector) {
return $('.ui-dialog-buttonpane button:first',
$(dialogSelector).parent()[0]);
};
...
$('#my_dialog').dialog({
open: function(event, ui) {
getFirstDialogButton("#my_dialog")
.addClass("ui-state-disabled").attr('disabled', 'disabled' );
},
...
然后可以使用相同的getFirstDialogButton（）函数来启用按钮，例如成功验证后。
希望它可以帮助别人。
答案 19 :(得分：3)
这是一个我刚刚使用分配按钮的Array方法实现的示例，然后允许我稍后使用id选择器 - 就像最初声明的那样 - 启用/禁用按钮甚至完全显示/隐藏它们我在做。
$( "#dialog-form" ).dialog({
autoOpen: true,
height: 500,
width: 450,
modal: true,
buttons: [
{
id: "submit_btn",
text: "Make Apointment",
click: function() {
//do ajax
}
},
{
id: "cancel_btn",
text: "Cancel",
click: function() {
$( this ).dialog( "close" );
}
},
{
id: "ok_btn",
text: "OK",
click: function() {
$( this).dialog('close');
},
disabled: "disabled"
}],
close: function() {
allFields.val( "" ).removeClass( "ui-state-error" );
}
});
成功提交后，我会禁用并隐藏其中两个按钮，并启用默认情况下已禁用的“确定”按钮。
$('#submit_btn, #cancel_btn').attr('disabled','disabled').addClass('ui-state-disabled').hide();
$('#ok_btn').attr('disabled','').removeClass('ui-state-disabled').show();
希望这有帮助。
答案 20 :(得分：3)
我认为它应该适用于所有人，
<script type="text/javascript">
$(document).ready(function() {
$('#dialog').dialog('open');
$(function(){
$('#dialog').dialog({
autoOpen: true,
width: 400,
modal: true,
overlay: {
opacity: 0.8,
background: "black"
},
resizable: false,
show: 'slow',
buttons: {
//"OK":function() {
// window.location="index.php?view=list";
//},
"Cancel": function() {
$(this).dialog("close");
$(this).attr("class", "button");
}
}
});
var dlgFirstButton = $('.ui-dialog-buttonpane').find('button:first');
dlgFirstButton.addClass('button');
});
});
</script>
答案 21 :(得分：3)
只是为了记录，这篇文章帮助我解决了我的问题。简而言之，您必须将disabled属性设置为disabled，而不是false：
_send_button.attr('disabled','disabled');
这就是所有代码的外观，我还添加了一些样式以使其看起来已禁用：
var _send_button = $('.ui-dialog-buttonpane button:contains(Send)');
var original_text = _send_button.text();
_send_button.text('Please wait...');
_send_button.addClass('ui-state-disabled');
_send_button.attr('disabled','disabled');
_send_button.fadeTo(500,0.2);
答案 22 :(得分：2)
要禁用“对话框”框中的“保存”按钮，请在函数中使用以下行。
$(".ui-dialog-buttonpane button:contains('Save')").attr("disabled", true).addClass("ui-state-disabled");
要更改按钮中的文本，请使用以下行（这会将取消按钮文本更改为关闭我）
$(".ui-dialog-buttonpane button:contains('Cancel') span").text("Close Me");
答案 23 :(得分：1)
@Chris您可以使用以下代码行来启用/禁用对话框按钮，直到您选中/取消选中复选框
<div id="dialog-confirm" title="test">
<label>Enable Confirm?<input type="checkbox" checked /></label>
</div>
$("#dialog-confirm").dialog({
resizable: false,
height:240,
modal: true,
buttons: {
Cancel: function() {
$(this).dialog('close');
},
'Confirm': function() {
$(this).dialog('close');
}
}
});
$("#dialog-confirm :checkbox").change(function() {
$(".ui-dialog-buttonpane button:contains('Confirm')")
.button(this.checked ? "enable" : "disable");
});
答案 24 :(得分：1)
在jQuery世界中，如果要从一组DOM元素中选择一个对象，则应使用eq()。
<强>示例：
var button = $（'button'）。eq（1）;
或
var button = $（'button：eq（1）'）;
答案 25 :(得分：1)
调用.attr("disabled", true)当然有效，但是使用jQuery你更喜欢用'糖'方式来做，所以我写了简单的扩展名：
(function( $ ) {
$.fn.disable = function(isDisabled) {
var val = isDisabled;
if (isDisabled === undefined)
val = true;
this.attr("disabled", val);
};
$.fn.enable = function(isEnabled) {
var val = !isEnabled;
if (isEnabled === undefined)
val = false;
this.attr("disabled", val);
}
})( jQuery );
现在你有了enable()和disable()的功能，所以你可以这样做：
$('#continueButton').disable();
与
相同$('#continueButton').disable(true);
和
$('#continueButton').enable(false);
答案 26 :(得分：1)
这为我完成了这项工作：
$find("<%= btnPrint.ClientID %>").set_enabled(true);
答案 27 :(得分：0)
如果有人在点击时想要用加载动画替换按钮（例如当＆＃34;提交＆＃34;按钮在对话框中提交表单时） - 你可以用你的图像替换按钮这样：
...
buttons: {
"Submit": function(evt) {
$(evt.target).closest('button').replaceWith('<img src="loading.gif">');
}
}
答案 28 :(得分：0)
要禁用一个按钮，请在对话框中打开：
$("#InspectionExistingFacility").dialog({
autoOpen: false, modal: true, width: 700, height: 550,
open: function (event, ui) {
$("#InspectionExistingFacility").parent().find(":button:contains('Next')").prop("disabled", true).addClass("ui-state-disabled");
},
show: { effect: "fade", duration: 600 }, hide: { effect: "slide", duration: 1000 },
buttons: { 'Next step': function () { }, Close: function () { $(this).dialog("close"); } }
});
答案 29 :(得分：0)
我有一个按钮，我不希望显示到触发点。
起初我试过这个有用： -
$(":button:contains('OK')").hide();
但是留下了一条线（因为它们已经全部消失了！），所以在我的CSS中添加了它： -
.ui-dialog .ui-dialog-buttonpane {
display: none;
}
这会隐藏所有按钮。
我可以在需要时重新启用： -
$('.ui-dialog .ui-dialog-buttonpane').css({"display":"block"}); //show button
答案 30 :(得分：0)
根据文档：
https://api.jqueryui.com/dialog/#option-buttons
// Setter
$( ".selector" ).button( "option", "disabled", true );
为了能够简单地选择按钮，您可以为按钮添加一个自己的CSS类，应该启用/禁用。
// while initializing
$("#dialog").dialog({
...
buttons: [{
disabled: true,
text: "Add to request list",
click: function (e: JQueryEventObject) {
// Some logic
},
"class": "myDialogButton"
}]
...
});
然后启用/禁用将如下所示：
$(".myDialogButton" ).button( "option", "disabled", (SOME_CONDITION) ? true : false);
答案 31 :(得分：0)
jQuery Solution对我有用。
$('.ui-button').addClass("ui-state-disabled");$('.ui-button').attr("aria-disabled",'true');$('.ui-button').prop('disabled', true);
答案 32 :(得分：0)
您只需将id添加到按钮中即可，它不在文档中，但可以使用。
$().dialog(buttons:[{id:'your button id'....}]);
然后在您的函数中只需使用
$('#your button id')
将其禁用。