如何从函数中禁用 jQuery 对话框中的按钮？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/577548/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I disable a button in a jQuery dialog from a function?
提问by Draco
I have a jQuery dialog that requires the user to enter certain information. In this form, I have a "continue" button. I would like this "continue" button to only be enabled once all the fields have content in them, else it will remain disabled.
我有一个 jQuery 对话框，需要用户输入某些信息。在这种形式中，我有一个“继续”按钮。我希望这个“继续”按钮只有在所有字段都包含内容后才启用，否则它将保持禁用状态。
I wrote a function that is called everytime a field status has changed. However, I don't know how to enable and disable the dialog button from this function. What should I do?
我编写了一个函数，每次字段状态发生变化时都会调用该函数。但是，我不知道如何通过此功能启用和禁用对话框按钮。我该怎么办？
Oops and I forgot to mention that these buttons were created as follows:
哎呀，我忘了提到这些按钮是按如下方式创建的：
$(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');
}
}
})
});
回答by Tom Ritter
You would want to set the disabled property
您想设置禁用属性
$('#continueButton').attr("disabled", true);
Update: Ahha, I see the complexity now. The jQuery Dialoghad a single line that will be of use (under the "buttons" section.
更新：啊哈，我现在看到了复杂性。的jQuery的对话框有一个单一的线，这将是有用的（下称“按钮”部分下。
var buttons = $('.selector').dialog('option', 'buttons');
You'll need to get the buttons collection from the dialog, loop through that to find which one you need, and then set the disabled attribute as I showed above.
您需要从对话框中获取按钮集合，遍历该集合以找到您需要的按钮集合，然后如我上面所示设置禁用属性。
回答by Raman
It's very simple:
这很简单：
$(":button:contains('Authenticate')").prop("disabled", true).addClass("ui-state-disabled");
回答by Ido Sela
You are all over complicating a simple task; the jQueryUI dialog has two ways to set buttons for a reason.
你把一个简单的任务复杂化了；jQueryUI 对话框有两种设置按钮的方法。
If you only need to set the click handler for each button, use the option that takes an Objectargument. For disabling buttons and provide other attributes, use the option that takes an Arrayargument.
如果您只需要为每个按钮设置点击处理程序，请使用带Object参数的选项。要禁用按钮并提供其他属性，请使用带Array参数的选项。
The following example will disable a button, and update its state correctly by applying all of the jQueryUI CSS classes and attributes.
以下示例将禁用按钮，并通过应用所有 jQueryUI CSS 类和属性正确更新其状态。
Step 1 - Create your dialog with an Arrayof buttons:
第 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() { ... }
}
] });
Step 2 - Enable/disable the Done button after the dialog is created:
步骤 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);
回答by vitalnik
If you create a dialog providing id's for the buttons,
如果您创建一个对话框，为按钮提供 ID，
$("#dialog").dialog({ buttons: [ {
id: "dialogSave",
text: "Save",
click: function() { $(this).dialog("close"); }
},
{
id: "dialogCancel",
text: "Cancel",
click: function() { $(this).dialog("close");
}
}]});
we can disable button with the following code:
我们可以使用以下代码禁用按钮：
$("#dialogSave").button("option", "disabled", true);
回答by Nick
I wanted to be able to find the button by name (since I have several buttons in my jQuery UI dialog). I also have several dialogs on the page so I need a way to get the buttons of a specific dialog. Here is my function:
我希望能够按名称找到按钮（因为我的 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' );
}
回答by Rainer Blessing
This disables a button:
这将禁用一个按钮：
var firstButton=$('.ui-dialog-buttonpane button:first');
firstButton.addClass('ui-state-disabled');
You have to add the dialog id if you have several dialogs on a page.
如果页面上有多个对话框，则必须添加对话框 ID。
回答by Chris Pietschmann
Here's the sample from the question modified to disable the button once clicked:
这是修改为单击后禁用按钮的问题的示例：
$(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');
}
}
});
}
Also, the following question will also be helpful with this: How can I disable a button on a jQuery UI dialog?
此外，以下问题也将对此有所帮助： 如何禁用 jQuery UI 对话框上的按钮？
回答by Hugh Turner
I found an easy way to disable (or perform any other action) on a dialog button.
我找到了一种在对话框按钮上禁用（或执行任何其他操作）的简单方法。
var dialog_selector = "#myDialogId";
$(dialog_selector).parent().find("button").each(function() {
if( $(this).text() == 'Bin Comment' ) {
$(this).attr('disabled', true);
}
});
You simply select the parent of your dialog and find all buttons. Then checking the Text of your button, you can identify your buttons.
您只需选择对话框的父级并找到所有按钮。然后检查按钮的文本，您可以识别您的按钮。
回答by Guillaume Aversa
I got this working with the method .dialog("widget")which returns the dialog DIV itself. If you're in the dialog methods:
我使用.dialog("widget")返回对话框 DIV 本身的方法得到了这个。如果您在对话框方法中：
$(this)
.dialog("widget")
.find("button")
.addClass("ui-state-disabled") // for the style
.attr("disabled", true);
回答by erikkallen
From a usability perspective, it's usually better to leave the button enabled but show an error message if someone tries to submit an incomplete form. It drives me nuts when the button I want to click is disabled and there is no clue to why.
从可用性的角度来看，通常最好让按钮保持启用状态，但如果有人尝试提交不完整的表单，则显示错误消息。当我想单击的按钮被禁用并且不知道原因时，它让我发疯。
