Disable Datapicker Calendar icon using Jquery?

Question

I have a table which has a set of data. Now in my table i have a checkbox for every row that enables or disables row. When i click on checkbox that specific row should get disabled. Issue is i am successfully able to disable the datepicker field but the calendar icon still remains enabled.

Below is the code i have been using:

For the datepicker textbox(Works Fine):

$(this).closest('tr').find('.animalBroughtDate').prop('disabled', true);

For the Calendar icon(Not working):

$(this).closest('tr').find('.ui-datepicker-trigger').hide();

HTML:

<input id="animalBroughtDateId" class="animalBroughtDate dtp hasDatepicker" style="width: 100px;" type="text">

<img title="Ok" alt="Ok" src="/../..datePicker.png" class="ui-datepicker-trigger">

Please guide.

Answer 1

Use built in UI datepicker disable command.

$(this).closest('tr').find('.animalBroughtDate').datepicker("disable");

And in case you want to enable just :

 $(this).closest('tr').find('.animalBroughtDate').datepicker("enable");