我有一个jQuery对话框，要求用户输入某些信息。在这个表单中，我有一个“continue”按钮。我想这个“继续”按钮只被启用一旦所有的领域有内容在他们，否则它将保持禁用。
我写了一个函数，每当字段状态发生变化时就调用它。但是，我不知道如何从这个功能启用和禁用对话框按钮。我该怎么办?
哎呀，我忘了说这些按钮是这样创建的:
$(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');
}
}
})
});
下面是我刚刚实现的一个示例，使用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" );
}
});
成功提交后，我禁用并隐藏了两个按钮，并启用默认禁用的OK按钮。
$('#submit_btn, #cancel_btn').attr('disabled','disabled').addClass('ui-state-disabled').hide();
$('#ok_btn').attr('disabled','').removeClass('ui-state-disabled').show();
希望这能有所帮助。
不幸的是，这里给出的解决方案对页面上的几个对话框都不起作用。
同样的问题是，原来的对话框本身不包含按钮窗格，但它是一个兄弟。
我想到了通过对话框ID进行选择
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()函数可以稍后用于启用按钮，例如在成功验证之后。
希望它能帮助到一些人。
如果你创建一个对话框，为按钮提供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);
下面是修改后的问题示例，一旦点击就会禁用按钮:
$(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');
}
}
});
}
另外，下面的问题也会有帮助:
如何禁用jQuery UI对话框上的按钮?
