CSS muss ich ändern

Ich suche nach Möglichkeiten, wie man .g > 输入 + span und

sagt So wenden Sie Stilattributeinstellungen nur auf Kontrollkästchenelemente an, deren ID mit „S“ beginnt.

.g > Enter + span::before {font-weight:400;content: 'G';color:#000;display: block;text-align: center;position: Absolute left: 0.36rem; Up: 0,12rem;}

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

Ich möchte eine Lösung ohne Verwendung von CSS-Variablen.

Dies ist nicht nur ein JS- und CSS-Problem.

Hier geht es nicht um Pseudoelemente

Diese Seite ist nicht statisch.

In dieser Anwendung gibt es über 2.000 Kontrollkästchen.

Die zu einem bestimmten Zeitpunkt angezeigte Teilmenge der Kontrollkästchen ist sehr dynamisch.

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>

Anleitung

Dies sind die Kontrollkästchen zur Auftragseingabe für Ärzte, die Bluttests auf chemische Allergien anordnen.

Einige Chemikalien (ID beginnt mit „S“) können nur Typ-E-Antikörper erkennen

Es gibt Chemikalien (IDs beginnen mit „C“), die auf E-, G- und G4-Antikörper testen.

Beispiel

JS Fiddle-Anwendungsbeispiel
Überprüfen Sie nur G und G4 auf Annatto, Iriswurzel, Papain und Pyrethrum

Nicht ausgewählt

Geprüft

Ich habe die Kontrollkästchen G und G4 für IDs, die mit „S“ beginnen, mit diesem JS deaktiviert:

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 diesem Beispiel möchte ich die Deckkraft der Kontrollkästchen G und G4 von Chinolingelb (#10) auf 0,25 ändern

Frage

Obwohl ich die Kontrollkästchen deaktivieren könnte, möchte ich den Arzt darauf hinweisen, dass die Auswahlmöglichkeiten G und G4 nicht verfügbar sind, indem ich den Text dunkler mache, z. B. „G“ und „G4“.

Ich weiß nicht, wie ich es in JS ausdrücken soll:.g > input + span::before{

Was passiert, wenn das Fragezeichen in diesem Ausdruck steht:

(oder jeder andere Selektor, der verwendet werden kann)

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

Wenn Sie weitere Ideen dazu haben, habe ich die volle Kontrolle über die Änderung von CSS, HTML und JS.

Das obige Beispiel, das ich ausprobiert habe, war wahrscheinlich unglücklich, seien Sie also nicht voreingenommen und denken Sie nicht, dass es so gemacht werden muss.

Diese Seite wird mit PHP generiert.

JS const dc wird in PHP erstellt.

Wenn die ID mit „S“ beginnt, füge ich die ID zum JS-DC-Array hinzu.

Ich habe viel Flexibilität für alle neuen Ideen, mit denen Sie etwas anfangen können.

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

Vollständiges Kontrollkästchen-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;}