Modifier la case à cocher CSS en fonction de l'ID de l'élément à l'aide de JavaScript

Question

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

Answer 1

Les choses que j'ai apprises ici sont très précieuses pour moi. Merci.
J'ai créé une routine JavaScript pour résoudre ce problème.

Lien vers la solution JavaScript JS Fiddle.

Mais je ne l’ai pas utilisé.
Je préfère une solution PHP/HTML.
Tout mon HTML est généré en PHP

C'est ainsi que j'ai résolu mon problème.

J'ai souligné <span> 添加了两个类（dim 和 disable), qui ressemble à une case à cocher.

PHP pour générer case à cocher :

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

}

HTML généré :
La classe HTML modifiée sera ajoutée au span> à la fin de la ligne.

Quand la case à cocher id commence par "C"

Quand la case à cocher id commence par "S"

Il y a deux lignes ici, chacune avec trois cases à cocher. Un avec C, un avec S

 

 
 Pyrethrum


 

 
 Quinoline Yellow (#10)

Answer 2

Vous pouvez utiliser document.querySelectorAll pour résoudre votre problème

CSS

.dim::before{
  opacity: 0.3; 
}

Ensuite, ajoutez une classe à l'élément 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"
})

Voir : https://jsfiddle.net/nfrap0hd/