Question

当我选中“更新”复选框时，我正在使用jquery启用3个字段（'撤回'，'电子邮件'和'序列号'）。它工作正常，但我更喜欢我的'电子邮件'和“序列号”字段实际上是隐藏的，直到选中“更新”复选框，但我不确定如何正确隐藏它们＆amp;然后使用什么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

试试这个：

将一个类添加到要隐藏的元素的容器中，例如：
```
<div class="form-inline to-hide">
```

使用此javascript代码：

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

_{以下简化代码。}

（可选）在document.ready上运行活动：

$(document).ready(function() {
    $("#@Html.IdFor(m => m.Notification.Update)").trigger("click");
});

＆＃13;

$("#update").on("click", function() {
    $(".to-hide")[($(this).is(":checked") ? "show" : "hide")]();
}).trigger("click");

＆＃13;

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

＆＃13;

简化的javascript代码（第2项）：

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

选中复选框时隐藏文本框

1 个答案: