Hide textbox when checkbox checked

Question

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>

    }

use display:none in css and then .show() / .hide() in jquery and you also want to do a check for this.checked in your change function — Pete
– Pete, Commented May 15, 2017 at 14:43

DontVoteMeDown · Accepted Answer · 2017-05-15 16:43:46Z

2

Try this:

Add a class to the container of the elements that would be hidden, e.g.:
```
<div class="form-inline to-hide">
```

Use this javascript code:

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

_{Simplified code below.}

(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();
    }
});

edited May 15, 2017 at 16:43

answered May 15, 2017 at 14:45

DontVoteMeDown

21.5k10 gold badges72 silver badges113 bronze badges

Sign up to request clarification or add additional context in comments.

14 Comments

JohnNewbie Over a year ago

Many thanks, this is exactly what I wanted, only when the form first loads, 'Serial Number' and 'Email' are visible. What would I need to add to make them hidden initially?

DontVoteMeDown Over a year ago

@JohnNewbie the item #3 should do that. It will run the event on the page load, so if the checkbox starts selected or not, the event should do it's work and show/hide the container.

DontVoteMeDown Over a year ago

@JohnNewbie example: if you add checked="false" to the checkbox manually, the trigger("click") will manage that state.

JohnNewbie Over a year ago

Sorry, I'm a complete novice so I'm a little confused, do I need parts 1, 2 & 3 to make this work? I am fine up until part 3 but when I try implementing the last part, it all stops working for me

DontVoteMeDown Over a year ago

@JohnNewbie no problem. You need parts 1 and 2. The third is just to open the page with elements hidden in case of the checkbox is not checked and vice versa. Check update.

|

Collectives™ on Stack Overflow

Hide textbox when checkbox checked

1 Answer 1

14 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

14 Comments

Your Answer

Sign up or log in

Post as a guest

Related