С двумя формами на одном экране, почему я могу вводить текст только во второй форме?

Question

У меня есть представление, в котором есть 2 формы, странно то, что я могу вводить текст только в текстовое поле во второй форме.

Начнем с того, что для divL ManualLogin и ForgotLogin задана непрозрачность 0, тогда как код пытается автоматически аутентифицировать пользователя; в случае сбоя у div ManualLogin непрозрачность установлена ​​на 1. Нажатие переключателей «Forgot Credentials» непрозрачность div для ManualLogin до 0, ForgotLogin до 1.

Таким образом, в текстовом поле имени пользователя и пароля не может быть введен текст, в него можно вводить текстовое поле электронной почты.

Если я поменяю местами div с ForgotLogin до div с ManualLogin, я могу ввести текст в поля имени пользователя и пароля, но не в поле электронной почты.

Если я настрою так, чтобы обе формы отображались одновременно, текст может быть введен во все поля.

Что вызывает это и как я могу это исправить?

<div id="MainLoginDiv">
    <div id="LoginHeaderDiv" class="text-center">
        <h3 id="LoginHeader" class="page-header" style="color:white;">&nbsp;</h3>
    </div>
    <div id="ManualLogin" class="box" style="border: none;">
        @using (Html.BeginForm())
        {
            @Html.AntiForgeryToken()
            <div class="form-group">
                <label class="control-label" style="color:white;">Username</label>
                @Html.TextBox("username", null, new { id = "username", @class = "form-control", @Value="us" })
            </div>
            <div class="form-group">
                <label class="control-label" style="color:white;">Password</label>
                @Html.TextBox("password", null, new { id = "password", @class = "form-control", @Value = "pwd" })
            </div>
            <div class="text-center" style="margin-top:40px;">
                <input type="button" id="ManualLoginBtn" value="Sign in" class="btn btn-primary" />
                <br />
                <input type="button" id="AutoLoginBtn" value="Auto Authenticate" class="btn btn-default" />
                <input type="button" id="ForgotLoginBtn" value="Forgot Credentials" class="btn btn-default" />
            </div>
        }
    </div>
    <div id="ForgotLogin" class="box" style="border: none;">
        @using (Html.BeginForm())
        {
            @Html.AntiForgeryToken()
            <div class="form-group">
                <label class="control-label" style="color:white;">Email</label>
                @Html.TextBox("email", null, new { id = "email", @class = "form-control", @Value = "jhjhblah" })
            </div>
            <div class="text-center" style="margin-top:40px;">
                <input type="button" id="BackToLoginBtn" value="Back" class="btn btn-default" />
                <input type="button" id="ForgotSubmitBtn" value="Submit" class="btn btn-primary" />
            </div>
        }
    </div>

Чтобы переключать эти div, я просто использую jquery для изменения непрозрачности css, например,

$("#ManualLogin").css("opacity", "0");
$("#ForgotLogin").css("opacity", "1");

Answer 1

Попробуйте использовать

    $("#ManualLogin").css("display", "none");
    $("#ForgotLogin").css("display", "block");