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

Clickable display only item in oracle apex 5.0.4

You can use Jquery to achieve the same.

Let's take a look at below example.

Function and Global Variable Declaration

1. $(function(){  
2.     $('#P50_CLICK_DISPLAY').on('click', function(){  
3.       $("#P50_HIDE").hide();  
4.       $("#P50_SHOW").show();  
5.       $("#P50_HIDE_LABEL").hide();    
6.       $("#P50_SHOW_LABEL").show();   
7.     })      
8. })  

Three  items in same region(Static). here P50_CLICK_DISPLAY is a display only item and it's value is static. There are two more item which is Hide and Show.

Now, initially p50_show will be hidden on page load and p50_hide will be displayed.When user clicks on display only item's value then p50_show will be displayed and p50_hide will be hidden.

Execute when Page Loads

1.  $("#P50_SHOW").hide();  
2.  $("#P50_SHOW_LABEL").hide();  

Here we have hide the Label as well as item.

This can be done without using DA which is more convenient way in this scenario.

Css:

1. #P50_CLICK_DISPLAY {   
2.         text-decoration: underline;  
3.         -webkit-text-decoration-color: red;  
4.         -moz-text-decoration-color: red;  /* vendor prefix not required as of V36 */  
5.          color: red;  
6. }  

If you want to  redirect you can use :

$('#P50_CLICK_DISPLAY').wrap('<a href="Link_url"></a>') ;

Demo : https://apex.oracle.com/pls/apex/f?p=30631:50:12855411930739:::::

Page : 50

Credentials : test/test