使用 jQuery 启用/禁用日期选择器在 ASP.NET MVC 中不起作用

如何解决使用 jQuery 启用/禁用日期选择器在 ASP.NET MVC 中不起作用

我想禁用我的 #datepicker，直到选中 #checkBox。

这是我的视图中的代码

<div class="form-group">

            @Html.LabelFor(model => model.Product.LastPurchaseDate,htmlAttributes: new { @class = "control-label col-md-2" })
            @Html.CheckBoxFor(model => model.IsNewPurchase,new { @id = "checkBox",type = "checkBox" })

            <div class="col-md-10">
                @Html.TextBoxFor(model => model.Product.LastPurchaseDate,new { @class = "form-control datepicker",id = "datepicker",@Value = @DateTime.Now.ToString("dd.MM.yyyy") })
            </div>

        </div>

和我已经尝试过但没有用的脚本：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<link href="~/Content/themes/base/jquery-ui.min.css" rel="stylesheet" />
@section scripts{
    <script>
        $(document).ready(function () {
            $(".datepicker").datepicker({
                format: 'dd.mm.yyyy',changemonth: true,changeyear: true,});

        });

    </script>
    <script>

        $(function () {
            $("#checkBox").change(function () {
                var st = this.checked;
                if (st) {
                    document.getElementById("datepicker").setAttribute("disabled",false)
                }
                else {
                    document.getElementById("datepicker").setAttribute("disabled",true)
                }
            }
                    });
    </script>
    <script>
        $(function () {
            $("#checkBox").change(function () {
                var st = this.checked;
                if (st) {
                    $('.datepicker').prop("disabled",false);
                }
                else {
                    $('.datepicker').prop("disabled",true);
                }
            }
                    });
    </script>
    <script>
        $('input[type="checkBox"]').change(function () {
            if ($('#checkBox').is('checked')) {
                $('.datepicker').prop('disabled',false);
            }
            else {
                $('.datepicker').prop('disabled',true);

            }
        });
    </script>
    <script>
        $('input[type="checkBox"]').change(function () {
            if ($('#checkBox').is('checked')) {
                $('.datepicker').attr('disabled',false);
            }
            else {
                $('.datepicker').attr('option','disabled',true);

            }
        });
    </script>

}

所有脚本均基于此处或 youtube 教程中类似问题的答案，但似乎对我不起作用。也许不是代码本身，而是缺少一些参考？我做错了什么？

解决方法

使用prop：

  $( function() {
    $("#datepicker").datepicker({
                format: 'dd.mm.yyyy',changemonth: true,changeyear: true,});
    $("#datepicker").datepicker('disable');
    $("#checkbox").change( function () {
        var st = $(this).prop('checked');
        if(st){
           $("#datepicker").datepicker('enable');
        } else{
            $("#datepicker").datepicker('disable');
        }   
  });

    $("#datepicker").datepicker({
                format: 'dd.mm.yyyy',});
    $("#datepicker").datepicker('disable');
    $("#checkbox").change( function () {
        var st = $(this).prop('checked');
        if(st){
           $("#datepicker").datepicker('enable');
        } else{
            $("#datepicker").datepicker('disable');
        } 
    });

<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>

<div class="form-check ml-3"><input class="form-check-input" type="checkbox" id="checkbox"><label class="form-check-label" for="catg100">Check/Uncheck</label></div>
<p>Date: <input type="text" id="datepicker"></p>