我有一个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');
}
}
})
});
你把一件简单的工作复杂化了;jQueryUI对话框有两种方法来设置按钮。
如果您只需要为每个按钮设置单击处理程序，请使用带有Object参数的选项。要禁用按钮和提供其他属性，请使用接受Array参数的选项。
下面的示例将禁用一个按钮，并通过应用所有jQueryUI CSS类和属性来正确更新其状态。
步骤1 -创建一个按钮数组对话框:
// 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 -在对话框创建后启用/禁用Done按钮:
// 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);
如果你创建一个对话框，为按钮提供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);
您需要设置disabled属性
$('#continueButton').attr("disabled", true);
更新:啊哈，我现在看到复杂性了。jQuery对话框中有一行是有用的(在“按钮”部分下)。
var buttons = $('.selector').dialog('option', 'buttons');
您需要从对话框中获取按钮集合，循环查找您需要的按钮，然后设置如上所示的disabled属性。
我发现了一个变通方法，可能适用于试图做类似事情的人。我没有禁用按钮，而是在函数中添加了一个简单的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");
}
}
}
});
不管怎样，我希望这能帮助到一些人。
要禁用一个按钮，在对话框打开:
$("#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"); } }
});
