如何在jquery和bootstrap中为您的日期选择器使用复选框？

如何解决如何在jquery和bootstrap中为您的日期选择器使用复选框？

我有boostrap复选框，并且想使用此复选框显示日期选择器，当用户选中它时，下面必须显示该日期选择器。

我的代码无法正常工作的一些奇怪原因，这意味着它没有按预期方式显示，并且需要一些帮助。

<div class="form-check">
       <div class="col-xl-2">
          @Html.CheckBoxFor(model=>model.Lockuntil,new { htmlAttributes = new { @class = "form-control",id="checkBox" } })
          <label class="form-check-label" for="@Html.IdFor(model=>model.Lockuntil)">Lockuntil</label>                          

        </div>                       
</div>

@section srcipts{
            <script src="~/Scripts/jquery-ui-1.12.1.min.js"></script>
            <script type="text/javascript">

            $('#checkBox').change(function(){
                if($(this).is(':checked')){
            $( "#from" ).datepicker('setDate',new Date(2020,08,26)).datepicker( "option","disabled",true );
            }else{
           $( "#to" ).datepicker( "option",false);
       
         }
        });
      });
</script>
                                
                                }