Remove jquery datepicker from a html control

Question

I have a datepicker on a textbox txtDate. I need to remove the datepicker, if a particular checkbox chkBox is checked. And to reapply the datepicker if the checkbox is not checked.

I tried making the textbox readonly, but datepicker is still working. How to do this.

EDIT: On the same checkbox event, I also want to make a select (dropdown) control as non selectable. No one should be able to change what in the select control.

Answer 1

In your change handler for the checkbox you can call enable or disable on the datepicker, for example:

$("#chkBox").change(function() {
  $("#txtDate").attr("readonly", this.checked)
               .datepicker(this.checked ? "disable" : "enable");
  //for your edit:
  $("#someSelect").attr("disabled", this.checked);
});

You can try it out in a demo here.