Question

我有一个注册表单，允许用户注册为两种类型的用户之一。通过选择一个单选按钮进行选择，根据所选的单选按钮，将通过jquery模式对话框显示不同的注册表单弹出。

我的问题是目前单选按钮正常工作，模态对话框正常显示。 HOWEVER ，在调用另一个对话框时，单选按钮不会更新（即它们不代表显示当前对话框。）即使对话框正在改变。（示例在下面的JsFiddle链接中提供）

E.g。当第一次单击注册时，对话框显示，并且用户可以单击“业务”，它将切换而不会出现任何问题。但是，此后，当用户再次尝试切换回“用户”时，即使对话框已切换到“用户”对话框，单选按钮也不会切换回显示“用户”的选项。

如何确保单选按钮对应于显示的对话框？

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/

Answer 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');


});

试试这个......

Answer 2

打开模态似乎会干扰默认无线电事件的完成。推迟打开模态，直到您的点击事件结束：

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

Answer 3

将模态设置为false

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

});

检查单选按钮在jQuery模式对话框中不能正常工作

3 个答案: