ASP.NET MVC checkbox JQuery toggle only work once

Question

I created a ASP.NET MVC project using VS2013, and created a model peron as shown below:

Then copy the following code to replace the view home index.cshmtl file. When I run it, the toggle worked once when I check the checkbox, the hide worked, but when I unchecked, it would not show. Anyone please help? I checked around and see similar issue but no real answers.

Person.cs as shown below:

using System;
using System.Linq;
namespace checkbox.Models
{
    public class Person
    {
        public bool IsActive { get; set; }
        public string Email { get; set; }
    }
  }

Below is the code for index page index.cshtml:

@model checkbox.Models.Person
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/jqueryval")


@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()

    <div class="form-horizontal">
        <h4>Person</h4>
        <hr />
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
        <div id="myCheckbox" class="form-group">
            @Html.LabelFor(model => model.IsActive, htmlAttributes: 
            new {     @class = "control-label col-md-2" })
            <div class="col-md-10">
                <div class="checkbox">
                    @Html.EditorFor(model => model.IsActive)
                    @Html.ValidationMessageFor(model => model.IsActive, "", 
                    new { @class = "text-danger" })
                </div>
            </div>
        </div>

        <div id="ShowHideMe" class="form-group">
            @Html.LabelFor(model => model.Email, htmlAttributes: 
              new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Email, 
                  new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Email, "",
                  new { @class = "text-danger" })
            </div>
        </div>

         <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="Save" class="btn btn-default" />
            </div>
        </div>
    </div>
}
<script type="text/javascript">
  $(function() {
      $('#myCheckbox').change(function() {
          $('#ShowHideMe').toggle($(this).is(':checked'));
      });
  });
</script>

pjobs · Accepted Answer · 2015-04-21T22:29:00.680

-2

change your javascript in the razor view to this

<script type="text/javascript">
  $(function() {
      $('#@Html.IdFor(model => model.IsActive)').click(function() {
          $('#ShowHideMe').toggle($(this).is(':checked'));
      });
  });
</script>

Instead of watching Change event on div tag, just use checkbox directly.

its not a good practice to mingle razor code with javascript, separate them as much as possible, it will ease the maintenance of code in long term

<script type="text/javascript">
  $(function() {
      /*Getting the client id from server side*/
      var isActiveId = '@Html.IdFor(model => model.IsActive)';

      $('#' + isActiveId).click(function() {
          $('#ShowHideMe').toggle($(this).is(':checked'));
      });
  });
</script>

edited Apr 21 '15 at 22:29

answered Apr 21 '15 at 17:34

pjobs

1,247
12
14

You cannot mix javascript/Razor like this:$('#@Html.IdFor(model => model.IsActive)') – AmmarCSE Apr 21 '15 at 21:08
Yes it is not good practice to use Id like this( I just want to show the op to use Id or class, instead of hard coding id, I did this). Just to let you know its not a rule, its just not good practice. – pjobs Apr 21 '15 at 21:10
no, I mean that this is syntactically incorrect, see http://stackoverflow.com/questions/4599169/using-razor-within-javascript – AmmarCSE Apr 21 '15 at 21:12
did you try it, it works perfectly, its just not production code. – pjobs Apr 21 '15 at 21:16
Thx much, I spent at 2 to 3 hours and couldn't figure it out. God bless your good deeds. – gregOh Apr 21 '15 at 21:25
Why you say it is not production code? this Javascript will stay on this page, anyone please show me what is the "production code" for this ??? – gregOh Apr 21 '15 at 21:38

ASP.NET MVC checkbox JQuery toggle only work once

1 Answers1