Блог

Я новичок в 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>
<% } %>
  

Как мне изменить этот код, чтобы сделать то, что я упомянул? Я хочу, чтобы флажок был серым / отключал текстовые поля имени пользователя и пароля.

В коде, с которым вы работаете / написали до сих пор, я не вижу никакого javascript. Для достижения цели, которую вы описали в своем вопросе, вам нужно будет написать некоторый код javascript. Например, вы можете подписаться на .change() событие флажка, а затем переключить readonly атрибут в двух полях ввода, что-то длиннее строк:

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