在MVC中取消选中复选框时，如何显示日期字段？

Question

HTML Helper

<div class="form-group">
    @Html.LabelFor(model => model.cb_FinalApproval, "Final Approval Date", new { @class = "control-label col-md-5" })
    <div class="col-md-offset-4">
        <label>@Html.CheckBoxFor(model => model.cb_FinalApproval, new { @checked = "checked" }) No</label> 
        @Html.TextBoxFor(model => model.FinalApprovalDate, new { @class = "datepicker17", id = "datepicker17"})
        @Html.ValidationMessageFor(model => model.cb_FinalApproval)
    </div>
</div>

我有我的复选框，因此默认情况下会选中它。如果用户取消选中该框，我希望出现datepicker17。我怎么能用Jquery做到这一点？

我尝试了下面的代码，但它没有用。

<script>
    /* fired when page has loaded - cannot call before page is ready */
    document.addEventListener("DOMContentLoaded", function () {
        $("#cb_FinalApproval").click(function () { // Attach to the cb_FinalApproval checkbox                   
            if ($("#cb_FinalApproval").prop("checked") == true) { // we test for the opposite that we desire, as the box will now be checked
                $("#FinalApprovalDate").val("cb_FinalApproval");
                if ($("#cb_FinalApproval").prop("checked") == false) { // we test for the opposite that we desire, as the box will now NOT be checked
                    $("#FinalApprovalDate").val("datepicker17");
                }
            };
        })
    });
</script>

Answer 1

您可以使用以下jQuery（请注意这依赖于问题中的dom结构，您可能希望使用不依赖于结构的选择器）：

<强>的JavaScript

$(function(){
    // Initially hide datepicker
    $('.datepicker17').show();

    $(".rb").change(function() {
        if($(this).is(":checked")) {
             $(this).parent().next().hide();
        }
        else {
             $(this).parent().next().show();
        }
    });

})

查看

请注意用于jQuery选择器的已添加的rb类。

<div class="form-group">
                @Html.LabelFor(model => model.cb_FinalApproval, "Final Approval Date", new { @class = "control-label col-md-5" })
                <div class="col-md-offset-4">
                    <label>@Html.CheckBoxFor(model => model.cb_FinalApproval, new { @checked = "checked", @class="rb" }) No</label> 
                    @Html.TextBoxFor(model => model.FinalApprovalDate, new { @class = "datepicker17", id = "datepicker17"})
                    @Html.ValidationMessageFor(model => model.cb_FinalApproval)
                </div>
</div>

<强> Working Fiddle