How to disable a page item without removing it from session state - oracle-apex

Question

I have 3 radio groups on my page. When user selects a value in the first radio group, if it is a particular value, the selection in the other two radio groups gets reset to default and they get disabled to prevent changing them.
The issue is that built-in apex Disable action uses disable javascript property so the value of the radio groups gets removed from session. It would need to use javascript equivalent to readonly, which, as far a s I know, does not currently exist in apex.
How can I get around this issue to enable/disable the radio groups based on a selection in another radio group while still being able to access selected value from my code?

Answer 1

Part of the problem is that readonly doesn't apply to radio buttons, as per the spec. Here's a solution that should work for you but be sure to test in multiple browsers...
Add this function to the Function and Global Variable Declaration attribute of the page:
function preventRadioSelection(e) {
e.preventDefault();
$(this).blur();
}
Add this CSS to the Inline attribute of the page:
.sudo-disabled+label {
opacity: .5;
cursor: default;
pointer-events: none;
}
When you need to Disable an item, use the Execute JavaScript action with the following code:
$(this.affectedElements).find('input').on('click', preventRadioSelection).addClass('sudo-disabled');
Then set Affected Elements to the item(s) you want to disable.
When you need to Enable an item, use the Execute JavaScript action with the following code:
$(this.affectedElements).find('input').off('click', preventRadioSelection).removeClass('sudo-disabled');
Then set Affected Elements to the item(s) you want to enable.
Keep in mind that all of this is client-side, and could be worked around by someone that knows what they're doing. You'll need to enforce your business rules with server-side validations.