我有一个注册表单,允许用户作为两种类型的用户之一注册。选择是通过选择一个单选按钮来进行的,根据所选的单选按钮,它将通过jquery模态对话框弹出显示不同的注册表。
我的问题是,目前单选按钮正在工作,模式对话框显示正常但是在调用另一个对话框时,即使对话框正在更改,单选按钮也不会更新(即,它们不代表当前显示的对话框)。(以下JsFiddle链接中提供的示例)
例如,当第一次点击注册时,会显示对话框,用户可以点击"业务",它将毫无问题地切换。但是,在此之后,当用户再次尝试切换回"用户"时,即使对话框已切换到"用户"对话框,单选按钮也不会切换回显示已选择"用户"。
如何确保单选按钮与显示的对话框相对应?
HTML(摘录):
<form id='Login' name='Login' method='post' action='login.php'>
<table id='MainPage' name='MainPage' border='1'>
<tr>
<td><label for='LoginEmail'>Email:</label></td>
<td><input type='text' class='Login' id='LoginEmail' name='LoginEmail' size='50' maxlength='50'></td>
</tr>
<tr>
<td><label for='LoginPassword'>Password:</label></td>
<td><input type='password' class='Login' id='LoginPassword' name='LoginPassword' size='50' maxlength='60'></td>
</tr>
<tr>
<td><span id='Register' name='Register' class='Registration' >Register </span></td>
<td><span id='ForgotPassword' name='ForgotPassword' class='Registration' >  Forgot Password</span></td>
<td><input type='submit' name='LoginSubmit' id='LoginSubmit' value='Login'></td>
</tr>
</table>
</form>
<div id='CreateUserForm' name='CreateUserForm' class='ModalDialog'>
<form id='UserCreate' name='UserCreate' action='registeruser.php' method='POST' enctype="multipart/form-data" novalidate="novalidate">
<div class='UserCreateField'>
I would like to register as a :
<label for='UserCreateUser'>User</label>
<input type='radio' name='UserCreateType' id='UserCreateUser' value='User' checked />
<label for='UserCreateBusiness'>Business</label>
<input type='radio' name='UserCreateType' id='UserCreateBusiness' value='Business' />
</div><br />
<div class='UserCreateField'>
<label for='UserCreateEmail'>Email:</label>
<div class='UserCreateInput'><input type='text' size='50' name='UserCreateEmail' id='UserCreateEmail' /></div>
<span>dasdasdasdasdasdsadasdasdasdasdadsaddsadsaddsa</span>
</div><br />
<div class="UserCreateField">
<label for="UserCreateConfirmEmail'">Confirm Email:</label>
<div class="UserCreateInput"><input type="text" size="50" name="UserCreateConfirmEmail" id="UserCreateConfirmEmail"></div>
<span></span>
</div><br />
<div class='UserCreateField'>
<label for='UserCreatePassword'>Password:</label>
<div class='UserCreateInput'><input type='password' size='50' name='UserCreatePassword' id='UserCreatePassword' /></div>
<span></span>
</div><br />
<div class='UserCreateField'>
<label for='UserCreateConfirmPassword'>Confirm Password:</label>
<div class='UserCreateInput'><input type='password' size='50' name='UserCreateConfirmPassword' id='UserCreateConfirmPassword' /></div>
<span></span>
</div><br />
<div class='ModalButton'>
<input type="button" id="UserCreateCancel" name="UserCreateCancel" class='ModalDialogButton' value="Cancel">
<input type="button" id="UserCreateSubmit" name="UserCreateSubmit" class='ModalDialogButton' value="Submit">
</div>
</form>
</div>
<div id='CreateBizForm' name='CreateBizForm' class='ModalDialog'>
<form id='BusinessCreate' name='BusinessCreate' action='registerbusiness.php' method='POST' enctype="multipart/form-data" novalidate="novalidate">
<div class='BusinessCreateField'>
I would like to register as a :
<label for='BusinessCreateUser'>User</label>
<input type='radio' name='BusinessCreateType' id='BusinessCreateUser' value='User' />
<label for='BusinessCreateBusiness'>Business</label>
<input type='radio' name='BusinessCreateType' id='BusinessCreateBusiness' value='Business' checked />
</div><br />
<div class='BusinessCreateField'>
<label for='BusinessCreateEmail'>Email:</label>
<div class='BusinessCreateInput'><input type='text' size='50' maxlength='50' name='BusinessCreateEmail' id='BusinessCreateEmail' /></div>
<span></span>
</div><br />
<div class="BusinessCreateField">
<label for="BusinessCreateConfirmEmail'">Confirm Email:</label>
<div class="BusinessCreateInput"><input type="text" size="50" maxlength='50' name="BusinessCreateConfirmEmail" id="BusinessCreateConfirmEmail"></div>
<span></span>
</div><br />
<div class='BusinessCreateField'>
<label for='BusinessCreatePassword'>Password:</label>
<div class='BusinessCreateInput'><input type='password' size='50' name='BusinessCreatePassword' id='BusinessCreatePassword' /></div>
<span></span>
</div><br />
<div class='BusinessCreateField'>
<label for='BusinessCreateConfirmPassword'>Confirm Password:</label>
<div class='BusinessCreateInput'><input type='password' size='50' name='BusinessCreateConfirmPassword' id='BusinessCreateConfirmPassword' /></div>
<span></span>
</div><br />
<div class='BusinessCreateField'>
<label for='BusinessCreateBusinessName'>Business Name:</label>
<div class='BusinessCreateInput'><input type='text' size='50' maxlength='50' name='BusinessCreateBusinessName' id='BusinessCreateBusinessName' /></div>
<span></span>
</div><br />
<div class='BusinessCreateField'><!--Category-->
<label for='BusinessCreateCategory'>Business Category</label>
<div class='BusinessCreateInput'><select name='BusinessCreateCategory' id='BusinessCreateCategory'></select></div>
<span></span>
</div><br />
<div class='BusinessCreateField'><!--SubCategory-->
<label for='BusinessCreateSubCategory'>Business SubCategory</label>
<div class='BusinessCreateInput'><select name='BusinessCreateSubCategory' id='BusinessCreateSubCategory'></select></div>
<span></span>
</div><br />
<div class='BusinessCreateField'>
<label for='BusinessCreateBusinessAddress'>Address:</label>
<div class='BusinessCreateInput'><input type='text' size='50' maxlength='300' name='BusinessCreateBusinessAddress' id='BusinessCreateBusinessAddress' /></div>
<span></span>
</div><br />
<div class='BusinessCreateField'>
<label for="BusinessCreateDescription">Business Description:</label><br>
<textarea class='BusinessCreateInput' name='BusinessCreateDescription' id='BusinessCreateDescription' cols='39' rows='5' maxlength='500' ></textarea>
<span></span>
</div><br />
<div class='BusinessCreateField'>
<label for='BusinessCreateFileUpload'>DisplayPic:</label>
<div class='BusinessCreateInput'><input type='file' name='BusinessCreateFileUpload' id='BusinessCreateFileUpload' /></div>
<span></span>
</div><br />
<div class='ModalButton'>
<input type="button" id="UserCreateCancel" name="BusinessCreateCancel" class='ModalDialogButton' value="Cancel">
<input type="button" id="UserCreateSubmit" name="BusinessCreateSubmit" class='ModalDialogButton' value="Submit">
</div>
</form>
</div>
jQuery:
$(document).ready(function(){
$('#CreateUserForm').hide();
$('#CreateBizForm').hide();
$('#Register').on('click',function(){
$('#CreateUserForm').dialog("open");
});
$('#CreateUserForm').dialog({
autoOpen: false,
closeOnEscape:false,
draggable:false,
resizable:false,
modal:true,
minWidth:400
});
$('#CreateBizForm').dialog({
autoOpen: false,
closeOnEscape:false,
draggable:false,
resizable:false,
modal:true,
minWidth:400,
height:'auto',
show:"slide"
});
$('#UserCreateBusiness').on('click',function(){
$('#CreateUserForm').dialog("close");
$('#CreateBizForm').dialog("open");
//$('#BusinessCreateBusiness').attr('checked','checked');
});
$('#BusinessCreateUser').on('click',function(){
$('#CreateBizForm').dialog("close");
$('#CreateUserForm').dialog("open");
//$('#UserCreateUser').attr('checked','checked');
});
});
如有任何见解,不胜感激。感谢
编辑:Jsfidle链接
http://jsfiddle.net/5Y5ZM/4/
$('#form1choice2').on('click',function(){
$('#1').dialog("close");
$('#2').dialog("open");
$("#form1choice2").attr('checked', 'checked');
});
$('#form2choice1').on('click',function(){
$('#2').dialog("close");
$('#1').dialog("open");
$("#form2choice1").attr('checked', 'checked');
});
试试这个。。。
打开模态似乎会干扰默认无线电事件的完成。推迟打开模式,直到点击事件结束:
setTimeout(function() {
$('#2').dialog("open");
}, 1);
将模态设置为假
$('#CreateBizForm').dialog({
autoOpen: false,
closeOnEscape:false,
draggable:false,
resizable:false,
modal:false, <--- here
minWidth:400,
height:'auto',
show:"slide"
});