Disabling kendo datepicker when clicked on checkbox

Question

I have two kendo date picker in input boxes and one checkbox I want to show the kendo datepickers all the time with current date . but they become enable /selectable /editable ONLY when user has checked the checkbox.

Checkbox

<input type="checkbox" id="RequredFilter" />

2 kendo Datepickers.

<input type="text" id="DateFrom" />
<input type="text" id="DateTo" />

I have tried various things like disabling text-boxes etc but datepickers just keep working/showing..

Answer 1

There is special method for enabling/disabling the DatePicker called enable - check this demo.

$('#RequredFilter').click(function(e){
    if($(this).is(':checked')){
        $('#DateFrom').data('kendoDatePicker').enable(true);
        $('#DateTo').data('kendoDatePicker').enable(true);
    }
    else{
        $('#DateFrom').data('kendoDatePicker').enable(false);
        $('#DateTo').data('kendoDatePicker').enable(false);
    }
})

Answer 2

Here's a slightly different approach:

$(document).ready(function() {
    $("#RequredFilter").change(function() {
        $('#DateFrom').data('kendoDatePicker').enable(this.checked);
        $('#DateTo').data('kendoDatePicker').enable(this.checked);
    });
});