Change checkbox CSS based on element ID using JavaScript

Question

CSS I need to change

I'm looking for how to express .g > input span and

How to apply style attribute settings only to checkbox elements whose ID starts with "S".

.g > Enter span::before {font-weight:400;content: 'G';color:#000;display: block;text-align: center;position: Absolute; Left: 0.36rem; Top: 0.12rem;}

.g4 > Enter span::before {font-weight:400;content: 'G4';color:#000;display: block;text-align: center;position: Absolute;left: 0.19 rem;top:0.12rem;}

I want a solution that doesn't use CSS variables.

This is not just a JS and CSS issue.

This is not a question about pseudo-elements

This page is not static.

There are over 2,000 checkboxes in this application.

The subset of checkboxes displayed at any given point in time is very dynamic.

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>

illustrate

These are the order entry checkboxes for doctors ordering chemical allergy blood tests.

Some chemicals (IDs starting with "S") can only detect type E antibodies

There are chemicals (IDs starting with "C") that test for E, G, and G4 antibodies.

Example

JS Fiddle Application Example
Only check for annatto, orris root, papain and pyrethrum in G and G4

Unselected

checked

I have disabled the checkboxes G and G4 for IDs starting with "S" using 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 want to change the opacity of the G and G4 checkboxes of Quinoline Yellow (#10) to 0.25

question

While I could disable these checkboxes, I would like to indicate to the doctor that the G and G4 selections are unavailable by darkening the text, such as "G" and "G4".

I don’t know how to express it in JS: .g > input span::before{

What will appear where the question mark is in this expression:

(or any other selector that can be used)

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

If you have any other ideas on how to do this, I have full control over changing the CSS, HTML and JS.

The above example I tried was probably unfortunate, so don't be biased into thinking that's the way it needs to be done.

This page is generated using PHP.

JS const dc is created in PHP.

When the id starts with "S", I add the id to the JS dc array.

I have a lot of flexibility for any new ideas that you can relate to.

if(substr($id,0,1) == 'S'){
  $js_dc .="'$code',";
}

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;}

Answer 1

What I learned here is very valuable to me. Thanks.
I did create a JavaScript routine to solve this problem.

Link to JS Fiddle JavaScript solution.

But I didn't use it.
I prefer a PHP/HTML solution.
All my HTML is generated using PHP

This is how I solved the problem.

I added two classes (dim and disable) to <span> styled to look like checkboxes.

Generate PHP for checkbox:

foreach($selected as $code => $types){
  $dim = '';
  $disable = '';
  if(substr($code,0,1) == 'S'){
    $dim = ' class="dim"';
    $disable = 'disabled';
  }
  if($types[0] == 5){echo '
' . $selected[$code][4] . "
\n";$none = "
No " . $selected[$code][4] . '
';continue;}
  if(strlen($code) 
 

 
 " . $types[4] . "
\n";

}

Generated HTML:
The changed HTML class will be added to the span> at the end of the line.

When the checkbox id starts with "C"

When the checkbox id starts with "S"

There are two rows here, each with three checkboxes. One with C, one with S

 

 
 Pyrethrum


 

 
 Quinoline Yellow (#10)

Answer 2

You can use document.querySelectorAll to solve your problem

CSS

.dim::before{
  opacity: 0.3; 
}

Then, add a class to the element via javascript

var elements = document.querySelectorAll(".g  > input[id^=S] + span")
elements.forEach(element=>{
  element.className += " dim"
})
elements = document.querySelectorAll(".g4  > input[id^=S] + span")
elements.forEach(element=>{
  element.className += " dim"
})

See: https://jsfiddle.net/nfrap0hd/