html – Utilizing JavaScript to Alter Checkbox CSS “.g > enter + span::earlier than{opacity:0.25}”

The CSS I would like to change

.g  > enter + span::earlier than {font-weight:400;content material: 'G';colour:#000;show: block;text-align: middle;place: absolute;left: 0.36rem;high: 0.12rem;}
.g4 > enter + span::earlier than {font-weight:400;content material: 'G4';colour:#000;show: block;text-align: middle;place: absolute;left: 0.19rem;high: 0.12rem;}

The HTML

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

These are order entry checkboxes for a physician to order chemical allergy blood assessments.
There are some chemical substances (Code begins with “S”) that may solely be examined for E sort antibodies
some for varieties
There are some chemical substances (Code begins with “C”) that may solely be examined for E, G, and G4 antibodies.

Unchecked

Checked

I’ve disabled the checkboxes G and G4 for the “Codes that start 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){
   doc.getElementById(dchttps://stackoverflow.com/q/73955552 + '2').disabled = true;  // "2" is G
   doc.getElementById(dchttps://stackoverflow.com/q/73955552 + '3').disabled = true;  // "3" is G4
}

On this instance I want to change the opacity to 0.25 for the G and G4 checkboxes for Quinoline Yellow (#10)

The issue

I have no idea tips on how to categorical this in JS: .g > enter + span::earlier than{

What would go the place the questions marks are on this expression:

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

I’ve full management to change CSS, HTML, and JS.

Full Checkbox CSS

.dchk{font:700 .8em Arial,sans-serif;show:inline-block;padding:0;margin:0;vertical-align: center;place: relative;}
.dchk{text-align:left;}
.chk {margin: 0;show: inline-block;peak:0;cursor: pointer;place: relative;}
.chk > span {colour: #fff; padding: 0; margin:0; peak:0; show: inline-block;}
.chk > enter {peak: 1.3em;width: 1.5em;margin:0 1px 0 1px;padding:4px 0 0 0 ;look: none; border: 1px stable #000;border-radius: 4px;define: none;transition-duration: 0.4s;cursor: pointer;}
.chk > enter:checked {border: 1px stable #000;}
.chk > enter:checked + span::earlier than {font-weight:700;content material: '✓';colour: #fff; show: block;text-align: middle;place: absolute;left: 0.34rem;high: -0.02rem;}
.chk > enter:energetic {border: 2px stable #000;}
.e  > enter{background-color: #f7f7fb;}
.e  > enter:checked{background-color: #f00;}
.e  > enter + span::earlier than {font-weight:400;content material: 'E';colour:#000;show: block;text-align: middle;place: absolute;left: 0.44rem;high: 0.12rem;}
.g4 > enter{background-color: #f7f7fb;}
.g4 > enter:checked{background-color: #ff0;}
.g4 > enter + span::earlier than {font-weight:400;content material: 'G4';colour:#000;show: block;text-align: middle;place: absolute;left: 0.19rem;high: 0.12rem;}
.g  > enter{background-color: #f7f7fb;}
.g  > enter:checked{background-color: #00f;}
.g  > enter + span::earlier than {font-weight:400;content material: 'G';colour:#000;show: block;text-align: middle;place: absolute;left: 0.36rem;high: 0.12rem;}
.g,.e > enter:checked + span::earlier than {colour: #fff;}
.g4 > enter:checked + span::earlier than {colour: #000;}