javascript - ASP.NET MVC 复选框上的灰色字段 = true

Question

我是 javascript/jquery 初学者。

我试图在单击复选框时灰显、禁用和更改文本框的背景颜色。我在实现网上找到的可能解决方案时遇到了困难。

这是我正在使用的代码:

<% using (Html.BeginForm()) { %>
    <span id="errorMsg">
        <%:(ViewData["ErrorMessage"])%>
    </span>
    <div>
        <fieldset>
            <legend>Account Information</legend>

            <div class="editor-label">
                <%: Html.LabelFor(m => m.UserName) %>
            </div>
            <div id="UserName" class="editor-field">
                <%: Html.TextBoxFor(m => m.UserName) %>
                <%: Html.ValidationMessageFor(m => m.UserName) %>
            </div>

            <div id "Password" class="editor-label">
                <%: Html.LabelFor(m => m.Password) %>
            </div>
            <div class="editor-field">
                <%: Html.PasswordFor(m => m.Password) %>
                <%: Html.ValidationMessageFor(m => m.Password) %>
            </div>
            <div id="checkBox" class="editor-field">
                <%: Html.CheckBoxFor(m => m.UseNetworkCreds %>  Use Network Credentials
                <%: Html.ValidationMessageFor(m => m.UseNetworkCreds)%>
            </div>


            <p>
                <input type="submit" value="Log On" />
            </p>

       </fieldset>
    </div>
<% } %>

如何修改此代码以执行我提到的操作？我希望该复选框灰显/禁用用户名和密码文本框。

Answer 1

在您正在使用/到目前为止编写的代码中，我看不到任何 JavaScript。为了实现您在问题中描述的目标，您需要编写一些 JavaScript 代码。例如，您可以订阅 .change()复选框的事件，然后切换两个输入字段上的 readonly 属性，如下所示:

$(function() {
    $('#UseNetworkCreds').change(function() {
        if ($(this).is(':checked')) {
            $('#UserName, #Password').attr('readonly', 'readonly');
        } else {
            $('#UserName, #Password').removeAttr('readonly');
        }
    });
});