Oracle APEX = 20.1.0.00.13

What I am trying to do: Run dynamic Action to Disable/Grey out interactive Grid Column based on Select List Update.

Example IG has 2 Columns:

Col1 [1/2/3 Select List], Col2 [Free Form Text]

When Col1 = 2 then Disable Col2 and color background to grey.

Where I am at: I am able to trigger the DA in order to grey out and color the on focus background with below.

CSS:

.apex_disabled {
  background-color: grey !important; 
}
.theColor {
  background-color: yellow !important;
  color: red !important;
}

DA is On Change Where Col1 = 2

True Value:

1: Set Value Col2 = ''

2: Run Javascript (Affected Element = Col2)

this.affectedElements.prop('readonly', true).addClass('apex_disabled'); 

Tried this as test to include in #2, but removed after no change:

this.affectedElements.prop('readonly', true).addClass('theColor'); 

False Value:

Run Javascript (Affected Element = Col2)

this.affectedElements.prop('readonly', false ).removeClass('apex_disabled');

Question/Issue:

After the column is disabled with above, the column looks like it is still editable and has the white background still when not selected or not in focus. It looks like the Not selected version of the cell is a different HTML element completely and I was unable to find out how to reference that inside the DA. Has someone been able to do this successfully?

Let me know if more information is needed.