CSS je dois changer

Je cherche comment dire .g > 输入 + span et

Comment appliquer les paramètres d'attribut de style uniquement aux éléments de case à cocher dont l'ID commence par "S".

.g > Entrez + span :: avant {font-weight: 400; contenu : 'G'; couleur : #000 ; affichage : bloc ; alignement du texte : centre ; position : Absolue à gauche : 0,36rem ; Vers le haut : 0,12rem ;}

.g4 > Entrez + span ::avant {font-weight:400;content: 'G4';color:#000;affichage: bloc;text-align: center;position: Absolute;gauche: 0.19rem;top :0.12rem;}

Je veux une solution sans utiliser de variables CSS.

Ce n'est pas seulement un problème JS et CSS.

Ce n'est pas une question de pseudo-éléments

Cette page n'est pas statique.

Il y a plus de 2 000 cases à cocher dans cette application.

Le sous-ensemble de cases à cocher affichées à un moment donné est très dynamique.

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>

Instructions

Ce sont les cases à cocher de saisie des commandes pour les médecins qui commandent des tests sanguins d’allergie chimique.

Certains produits chimiques (l'ID commence par "S") ne peuvent détecter que les anticorps de type E

Il existe des produits chimiques (ID commençant par « C ») qui testent les anticorps E, G et G4.

Exemple

Exemple d'application JS Fiddle
Vérifiez uniquement le rocou, la racine d'iris, la papaïne et le pyrèthre dans G et G4.

Non sélectionné

Vérifié

J'ai décoché les cases G et G4 pour les identifiants commençant par "S" en utilisant ce 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
}

Dans cet exemple, je souhaite changer l'opacité des cases G et G4 de Quinoline Yellow (#10) à 0,25

Question

Bien que je puisse désactiver les cases à cocher, j'aimerais indiquer au médecin que les sélections G et G4 ne sont pas disponibles en rendant le texte plus sombre, par exemple "G" et "G4".

Je ne sais pas comment l'exprimer en JS :.g > input + span::before{

Que se passe-t-il là où se trouve le point d'interrogation dans cette expression :

(ou tout autre sélecteur pouvant être utilisé)

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

Si vous avez d'autres idées sur la façon de procéder, j'ai le contrôle total sur la modification du CSS, du HTML et du JS.

L’exemple ci-dessus que j’ai essayé était probablement malheureux, alors ne pensez pas que c’est ainsi que cela doit être fait.

Cette page est générée avec PHP.

JS const dc est créé en PHP.

Lorsque l'identifiant commence par "S", j'ajoute l'identifiant au tableau JS dc.

J'ai beaucoup de flexibilité pour toute nouvelle idée à laquelle vous pouvez vous identifier.

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

Case à cocher complète 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;}