我有一个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');
}
}
})
});
我认为这对所有人都有效,
<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>
我发现了一个变通方法,可能适用于试图做类似事情的人。我没有禁用按钮,而是在函数中添加了一个简单的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");
}
}
}
});
不管怎样,我希望这能帮助到一些人。
根据文档:
https://api.jqueryui.com/dialog/#option-buttons
// Setter
$( ".selector" ).button( "option", "disabled", true );
为了能够简单地选择按钮,你可以为按钮添加一个自己的CSS类,它应该是启用/禁用的。
// while initializing
$("#dialog").dialog({
...
buttons: [{
disabled: true,
text: "Add to request list",
click: function (e: JQueryEventObject) {
// Some logic
},
"class": "myDialogButton"
}]
...
});
然后启用/禁用看起来像这样:
$(".myDialogButton" ).button( "option", "disabled", (SOME_CONDITION) ? true : false);