Question

I’m a javascript/jquery beginner.

I’m trying to gray out, disable, and change the background color of a textbox when a checkbox is clicked. I’ve had trouble implementing possible solutions I found online.

Heres the code I’m working with:

<% 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>
<% } %>

How do I modify this code to do what I mentioned? I want the checkbox to gray out/disable the username and password textboxes.

Answer 1

In the code you are working with/have written so far I can’t see any javascript. To achieve the goal you described in your question you will need to write some javascript code. For example you could subscribe for the .change() event of the checkbox and then toggle the readonly attribute on the two input fields, something long the lines of:

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