选中的单选按钮在 jQuery 模态对话框中无法正常工作答案

【问题标题】：Checked radio buttons not working right in jQuery modal dialog选中的单选按钮在 jQuery 模态对话框中无法正常工作
【发布时间】：2013-12-09 12:04:27
【问题描述】：

我有一个注册表单，允许用户注册为两种类型的用户之一。选择是通过选择一个单选按钮进行的，根据选择的单选按钮，将通过 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' >&nbsp 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 链接

http://jsfiddle.net/5Y5ZM/4/

【问题讨论】：

“单选按钮未更新”是什么意思？你能在jsfiddle.net 提供你的例子吗？
@reporter 我似乎无法让它在 jsfiddle 中工作，我的意思是当我切换卸载时（例如从表格 1 到表格 2，选中的单选按钮正在工作，但是当我尝试点击返回，对话框切换，但单选按钮不会改变。）
如果给每个表单中的每个单选按钮赋予相同的名称会发生什么？据我所知，为了更新按钮，浏览器会忽略 id 属性，只关注 name 属性。
我已经将每个表单中的单选按钮的名称更改为相同的名称，但没有发生任何新情况。我会更新有关名称的问题
@reporter 我已经搞定了 jsfiddle，这是链接jsfiddle.net/5Y5ZM/1

标签： javascript jquery jquery-ui dialog modal-dialog

【解决方案1】：

$('#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');


});

试试这个...

【讨论】：

我已经尝试过您的建议，但似乎没有任何效果。 =X

【解决方案2】：

打开模式似乎会干扰默认无线电事件的完成。将模式的打开推迟到您的点击事件完成后：

setTimeout(function() {
    $('#2').dialog("open");
}, 1);

【讨论】：

【解决方案3】：

将模态设置为 false

$('#CreateBizForm').dialog({
    autoOpen: false,
    closeOnEscape:false,
    draggable:false,
    resizable:false,
    modal:false,    <--- here
    minWidth:400,
    height:'auto',
    show:"slide"

});

【讨论】：