CODEWITHSUNDEEP
javascriptjquerycheckbox
JohnNewbie
JohnNewbie

Reputation: 67

Hide textbox when checkbox checked

I am using jquery to enable 3 fields ('withdrawn', 'email' & 'serial number') when my 'update' checkbox is checked. It is working but I would prefer if my 'email' & 'serial number' fields were actually hidden until the 'update' checkbox is checked, however I am unsure how to hide them properly & then what jquery code to use to unhide them. I'd also like the fields to go back to their original state if 'update' is unchecked. Please help...

    <div class="form-inline">
    <div class="checkbox" id="initialNotification">
        <label>
            @Html.CheckBoxFor(m => m.Notification.Intial) Initial notification
        </label>
    </div>    
    <div class="checkbox" id="update" checked ="false">
        <label>
            @Html.CheckBoxFor(m => m.Notification.Update) Update to an existing notification
        </label>
    </div>
</div>
    <div class="form-inline">
    <div class="form-group">
        @Html.LabelFor(m => m.Notification.SerialNumber)
        @Html.TextBoxFor(m => m.Notification.SerialNumber, new { @class= "form-control", @disabled = "disabled" })
        @Html.ValidationMessageFor(m => m.Notification.SerialNumber)

    </div>
    <div class="form-group">
        @Html.LabelFor(m => m.Notification.Email)
        @Html.TextBoxFor(m => m.Notification.Email, new { @class = "form-control", @disabled = "disabled" })
        @Html.ValidationMessageFor(m => m.Notification.Email)

    </div>
</div>

    <div class="checkbox" id="withdrawn">
        <label>
            @Html.CheckBoxFor(m => m.Notification.Withdrawn, new { @disabled = "disabled" }) The project has been withdrawn
        </label>
    </div>

    @section scripts
{
        <script>         

            $(document).ready(function () {
                $("#Notification_Update").attr("checked", false)
                $("#@Html.IdFor(m => m.Notification.Update)").trigger("click");             

            });            
            $("#@Html.IdFor(m => m.Notification.Update)").on("click", function () {                
                if ($(this).is(":checked") || @(Model.Notification.Update.ToString().ToLower()) == true) {
        $(".to-hide").show();
    }
    else {
        $(".to-hide").hide();
    }
            });            
          </script>

    }

Upvotes: 0

Views: 1700

Answers (1)

DontVoteMeDown
DontVoteMeDown

Reputation: 21465

Try this:

  1. Add a class to the container of the elements that would be hidden, e.g.:

    <div class="form-inline to-hide">

  2. Use this javascript code:

    $("#@Html.IdFor(m => m.Notification.Update)").on("click", function() {
    $(".to-hide")[($(this).is(":checked") ? "show" : "hide")]();
});

    Simplified code below.

  3. (Optional) Run the event on document.ready:

    $(document).ready(function() {
    $("#@Html.IdFor(m => m.Notification.Update)").trigger("click");
});


$("#update").on("click", function() {
    $(".to-hide")[($(this).is(":checked") ? "show" : "hide")]();
}).trigger("click");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="checkbox" id="update" />
<div class="to-hide">Hide me</div>

Simplified javascript code(item #2):

$("#@Html.IdFor(m => m.Notification.Update)").on("click", function() {
    if ($(this).is(":checked")) {
        $(".to-hide").show();
    }
    else {
        $(".to-hide").hide();
    }
});

Upvotes: 2

Related Questions