同一视图上有两个窗体,为什么只能在第二个窗体中输入文本?

我有一个视图,它有两个窗体,奇怪的是我只能在第二个窗体的文本框中输入文本。

首先,div的ManualLogin和ForgotLogin都将其不透明度设置为0,这是在代码尝试自动验证用户时,如果失败,ManualLogin div将其不透明度设置为1。单击“忘记凭据”将div的ManualLogin不透明度切换为0,ForgotLogin切换为1。

因此,用户名和密码文本框不能输入文本,电子邮件文本框可以输入。

如果我将前面的login div替换为ManualLogin div之前,我可以在username和password字段中输入文本,但不能在email字段中输入文本。

是什么原因造成的?我该如何修复它?

<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");