我有一个注册表单,允许用户注册为两种类型的用户之一。通过选择一个单选按钮进行选择,其中根据选择的单选按钮,将通过 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');
});
});
希望得到任何见解。谢谢
编辑:Jsfiddle 链接
最佳答案
$('#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');
});
试试这个...
关于javascript - 检查单选按钮在 jQuery 模式对话框中无法正常工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20470212/