Using JavaScript to Alter Checkbox CSS, ".g > input + span::before{opacity:0.25}"

The CSS I need to alter

.g  > input + span::before {font-weight:400;content: 'G';color:#000;display: block;text-align: center;position: absolute;left: 0.36rem;top: 0.12rem;}
.g4 > input + span::before {font-weight:400;content: 'G4';color:#000;display: block;text-align: center;position: absolute;left: 0.19rem;top: 0.12rem;}

The HTML

<div class="row">
<div class="dchk"><label class="e chk"> <input type="checkbox" id="C0081" class="chk" name="aC0081" value="1" /><span></span></label></div>
<div class="dchk"><label class="g4 chk"><input type="checkbox" id="C0083" class="chk" name="aC0083" value="3" /><span></span></label></div>
<div class="dchk"><label class="g chk"> <input type="checkbox" id="C0082" class="chk" name="aC0082" value="2" /><span></span></label></div>
<div class="inline">&nbsp;Pyrethrum</div></div>
<div class="row">
<div class="dchk"><label class="e chk"> <input type="checkbox" id="S0171" class="chk" name="aS0171" value="1" /><span></span></label></div>
<div class="dchk"><label class="g4 chk"><input type="checkbox" id="S0173" class="chk" name="aS0173" value="3" /><span></span></label></div>
<div class="dchk"><label class="g chk"> <input type="checkbox" id="S0172" class="chk" name="aS0172" value="2" /><span></span></label></div>
<div class="inline">&nbsp;Quinoline Yellow (#10)</div></div>

Explanation
These are order entry checkboxes for a doctor to order chemical allergy blood tests.
There are some chemicals (Code begins with "S") that can only be tested for E type antibodies
There are some chemicals (Code begins with "C") that can be tested for E, G, and G4 antibodies.

Unchecked

Checked

I have disabled the checkboxes G and G4 for the "Codes that begin with "S" with this JS:

JavaScript

const dc = ['S057','S021','S028','S058','S024','S042','S029','S013','S003','S072','S079','S034','S027','S082','S017','S085','S087','S093','S002','S015','S018','S090',]
for (id in dc){
   document.getElementById(dc[id] + '2').disabled = true;  // "2" is G
   document.getElementById(dc[id] + '3').disabled = true;  // "3" is G4
}

In this example I would like to change the opacity to 0.25 for the G and G4 checkboxes for Quinoline Yellow (#10)

The problem

While I can disable the checkboxes, I want to indicate to the doctor that the G and G4 selections are not available by dimming the text e.g. "G" and "G4".

I do not know how to express this in JS: .g > input + span::before{

What would go where the questions marks are in this expression:

document.getElementById(????????).opacity = 0.25;

I have full control to alter CSS, HTML, and JS.

Full Checkbox CSS

.dchk{font:700 .8em Arial,sans-serif;display:inline-block;padding:0;margin:0;vertical-align: middle;position: relative;}
.dchk{text-align:left;}
.chk {margin: 0;display: inline-block;height:0;cursor: pointer;position: relative;}
.chk > span {color: #fff; padding: 0; margin:0; height:0; display: inline-block;}
.chk > input {height: 1.3em;width: 1.5em;margin:0 1px 0 1px;padding:4px 0 0 0 ;appearance: none; border: 1px solid #000;border-radius: 4px;outline: none;transition-duration: 0.4s;cursor: pointer;}
.chk > input:checked {border: 1px solid #000;}
.chk > input:checked + span::before {font-weight:700;content: '✓';color: #fff; display: block;text-align: center;position: absolute;left: 0.34rem;top: -0.02rem;}
.chk > input:active {border: 2px solid #000;}
.e  > input{background-color: #f7f7fb;}
.e  > input:checked{background-color: #f00;}
.e  > input + span::before {font-weight:400;content: 'E';color:#000;display: block;text-align: center;position: absolute;left: 0.44rem;top: 0.12rem;}
.g4 > input{background-color: #f7f7fb;}
.g4 > input:checked{background-color: #ff0;}
.g4 > input + span::before {font-weight:400;content: 'G4';color:#000;display: block;text-align: center;position: absolute;left: 0.19rem;top: 0.12rem;}
.g  > input{background-color: #f7f7fb;}
.g  > input:checked{background-color: #00f;}
.g  > input + span::before {font-weight:400;content: 'G';color:#000;display: block;text-align: center;position: absolute;left: 0.36rem;top: 0.12rem;}
.g,.e > input:checked + span::before {color: #fff;}
.g4 > input:checked + span::before {color: #000;}