我有一个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');
}
}
})
});
我发现了一个变通方法，可能适用于试图做类似事情的人。我没有禁用按钮，而是在函数中添加了一个简单的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");
}
}
}
});
不管怎样，我希望这能帮助到一些人。
郑重声明，这篇文章帮我解决了我的问题。简而言之，你必须将disabled属性设置为disabled，而不是false:
_send_button.attr('disabled','disabled');
这是所有代码的外观，我还添加了一些样式，使它看起来是禁用的:
var _send_button = $('.ui-dialog-buttonpane button:contains(Send)');
var original_text = _send_button.text();
_send_button.text('Please wait...');
_send_button.addClass('ui-state-disabled');
_send_button.attr('disabled','disabled');
_send_button.fadeTo(500,0.2);
我认为这对所有人都有效，
<script type="text/javascript">
$(document).ready(function() {
$('#dialog').dialog('open');
$(function(){
$('#dialog').dialog({
autoOpen: true,
width: 400,
modal: true,
overlay: {
opacity: 0.8,
background: "black"
},
resizable: false,
show: 'slow',
buttons: {
//"OK":function() {
// window.location="index.php?view=list";
//},
"Cancel": function() {
$(this).dialog("close");
$(this).attr("class", "button");
}
}
});
var dlgFirstButton = $('.ui-dialog-buttonpane').find('button:first');
dlgFirstButton.addClass('button');
});
});
</script>
要禁用一个按钮，在对话框打开:
$("#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"); } }
});
