选中的单选按钮在jQuery模式对话框中不能正常工作
Checked radio buttons not working right in jQuery modal dialog
我有一个注册表单，允许用户作为两种类型的用户之一注册。选择是通过选择一个单选按钮来进行的，根据所选的单选按钮，它将通过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"
});
相关文章：
- Javascript:selenium Web驱动程序isDisplayed(）不工作
- jQuery UI自动完成突然停止工作
- AngularJS UI路由器不能像ng路由器那样工作
- HTML5音频加载和播放获胜'我不能在iPad上工作
- JavaScript打印功能使日历停止工作
- Javascript.getHours(）工作不正常
- 为什么这在IE中的工作方式与在Firefox中不同
- 视频HTML没有'无法在Internet Explorer 11上工作
- 扩展移相器按钮类不工作
- Firebase迁移-简单的Firebase.set没有'不再工作了——旧的还是新的
- 谷歌地图不是以HTML显示，而是在JS Fiddle上工作
- 正在尝试使用if和else添加类，但无法正常工作
- Jquery FadeIn FadeOut 只工作一次
- Foreach无法在Typescript中工作
- 另一个ajax调用中的Jquery ajax调用在for循环中没有按预期工作
- 为什么不是't窗口.恢复正常工作吗?(javascript/jquery）
- JS可以在Chrome中工作，但不能在Firefox中工作
- ajaxToolkit PopupControlExtender不工作.过时的
- HTML标记在脚本标记中工作
- javascript扫雷器floodfill算法不能正常工作
