javascript - 选中复选框时隐藏文本框

Question

当选中“更新”复选框时，我使用 jquery 启用 3 个字段(“撤回”、“电子邮件”和“序列号”)。它正在工作，但我希望我的“电子邮件”和“序列号”字段实际上是隐藏的，直到选中“更新”复选框为止，但是我不确定如何正确隐藏它们以及使用什么 jquery 代码来取消隐藏它们。如果未选中“更新”，我还希望这些字段恢复到原始状态。请帮忙...

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

    }

Answer 1

试试这个:

1. 将一个类添加到要隐藏的元素的容器中，例如:

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

2. 使用此 JavaScript 代码:

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

   _{下面的简化代码。}

3. (可选)在 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>

简化的 JavaScript 代码(第 #2 项):

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