我有一个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');
}
}
})
});
您需要设置disabled属性
$('#continueButton').attr("disabled", true);
更新:啊哈，我现在看到复杂性了。jQuery对话框中有一行是有用的(在“按钮”部分下)。
var buttons = $('.selector').dialog('option', 'buttons');
您需要从对话框中获取按钮集合，循环查找您需要的按钮，然后设置如上所示的disabled属性。
下面是我刚刚实现的一个示例，使用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();
希望这能有所帮助。
我发现了一个变通方法，可能适用于试图做类似事情的人。我没有禁用按钮，而是在函数中添加了一个简单的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");
}
}
}
});
不管怎样，我希望这能帮助到一些人。
