Toggle check-box in tabular form

 Hide and display Check box(td) based on value of other td.

Situation is such where by we want users to input some data into some specific field without it we wont allow them to do any data manipulation stuff with particular field value.

We wanted to hide Check-box (td) if user do not insert value into date-picker.

Datepicker HTML structure looks something like :

 <span style="white-space: nowrap;">
<input type="text" class="u-TF-item u-TF-item--datepicker  hasDatepicker" id="f04_0003" name="f04" maxlength="2000" size="12" value="09-JUN-81" autocomplete="off">
<button type="button" class="ui-datepicker-trigger a-Button a-Button--calendar">
<span class="a-Icon icon-calendar"></span>
<span class="u-VisuallyHidden">Popup Calendar: Hiredate <span>
 </button>
 </span>

 Here name is f04 and it's id f04_0003.For all the fields in tabular form each cell will have unique ID which we will be able to get.
 ID is nothing but the combination of name plus string to represent a row in this case '_0003' so if you combine both name and unique value it becomes 'f04_0003'.

Check-box HTML structure looks something like :

 <td class="t-Report-cell" headers="CHECK$01">
<label for="f01_0002" id="f01_0002_LABEL" class="u-VisuallyHidden">Select Row</label>
<input type="checkbox" name="f01" value="2" class="u-TF-item u-TF-item--checkbox row-selector" id="f01_0002" autocomplete="off" style="display: inline-block;">
 </td>

 For the same we will create Dynamic Action(DA) which will fire based on following condition.

 Event = Change
 Selection type = jQuery selector
 jQuery selector = input[name="f04"]
 Fire on page load = Uncheck

(Example : whenever an input whose name is 'f04' is changed, fire this action.)

Execute Javascript Code =

 var this_id = $(this.triggeringElement).attr('id');

console.log(this_id );

var that_id = 'f01'+this_id.substr(3);

console.log(that_id);



   if ($(this.triggeringElement).val() == "") {

   $('#'+that_id).hide();

   console.log("Let's hide it");

} else {

    $('#'+that_id).show();

    console.log("Let's display it back again");

}

If you want to hide any text-field then modify as below.

if ($(this.triggeringElement).val() == "") {
    $('#'+that_id).closest('span').hide();
} else {
    $('#'+that_id).closest('span').show();
}


 demo
 test/test