How can I disable a button in a jQuery dialog from a function?
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.
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');
}
}
})
});
You would want to set the disabled property
$('#continueButton').attr("disabled", true);
Update : Ahha, I see the complexity now. The jQuery Dialog had a single line that will be of use (under the "buttons" section.
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.
这很简单：
$(":button:contains('Authenticate')").prop("disabled", true).addClass("ui-state-disabled");
You are all over complicating a simple task; the jQueryUI dialog has two ways to set buttons for a reason.
If you only need to set the click handler for each button, use the option that takes an Object argument. For disabling buttons and provide other attributes, use the option that takes an Array argument.
The following example will disable a button, and update its state correctly by applying all of the jQueryUI CSS classes and attributes.
Step 1 - Create your dialog with an Array of buttons:
// 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:
// 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);
上一篇: 获取一个空的JQuery对象