ASP.NET MVC флажок JQuery переключения работают только один раз

Question

Я создал проект ASP.NET MVC с помощью VS2013, и создал модель Перон, как показано ниже:

Затем скопируйте следующий код, чтобы заменить вид домашнего index.cshmtl файл. Когда я запускаю его, тумблер работал один раз, когда я проверяю флажок, спрятанный сработал, но когда я его отключил, он не будет отображаться. Кто-нибудь, пожалуйста, помогите? Я проверил и увидел подобную проблему, но никаких реальных ответов.

Person.cs, как показано ниже:

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

Ниже приведен код страницы индекса 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> 

Answer 1

изменить ваш Javascript в представлении бритвы к этому

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

Вместо того, чтобы смотреть событие Change на теге div, используйте флажок непосредственно.

не очень хорошая практика, чтобы смешаться код бритвы с JavaScript, разделите их как можно больше, это облегчит поддержание кода в долгосрочной перспективе

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