How can I make a date field appear when a checkbox is unchecked in MVC?

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>

I have my checkbox so that by default it is checked. If a user unchecks the box I would like datepicker17 to appear. How can I do this with Jquery?

I tried the code below but it didn't work.

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