選中復選框時隱藏文本框

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