Enabling/disabling datepicker using jQuery not working in ASP.NET MVC

Question

I want to my #datepicker to be disabled until #checkbox is checked.

Here is code from my View

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

and scripts I have already tried but didn't work:

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

}

All scripts were based on answers for similar questions here or youtube tutorials, but nothing seems to work for me. Maybe it's not the code itself, but some refference is missing? What am I doing wrong?

question from:https://stackoverflow.com/questions/66052688/enabling-disabling-datepicker-using-jquery-not-working-in-asp-net-mvc

Answer 1

use 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',
                changemonth: true,
                changeyear: true,

    });
    $("#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>