Tukar CSS kotak semak berdasarkan ID elemen menggunakan JavaScript

Question

CSS Saya perlu tukar

Saya sedang mencari cara untuk menyebut .g > 输入 + span dan

Cara menggunakan tetapan atribut gaya hanya pada elemen kotak semak yang IDnya bermula dengan "S".

.g > Masukkan + span::sebelum {font-berat:400;kandungan: 'G';warna:#000;paparan: blok;sejajarkan teks: tengah;kedudukan: Absolute; Naik: 0.12rem;}

.g4 > Masukkan + span ::sebelum {font-weight:400;kandungan: 'G4';color:#000;paparan: blok;text-align: center;position: Absolute;left: 0.19rem;top :0.12rem;}

Saya mahukan penyelesaian tanpa menggunakan pembolehubah CSS.

Ini bukan hanya isu JS dan CSS.

Ini bukan soalan tentang unsur pseudo

Halaman ini tidak statik.

Terdapat lebih 2,000 kotak pilihan dalam aplikasi ini.

Subset kotak pilihan yang dipaparkan pada mana-mana masa tertentu adalah sangat dinamik.

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>

Arahan

Ini adalah kotak semak kemasukan pesanan untuk doktor yang memesan ujian darah alahan kimia.

Sesetengah bahan kimia (ID bermula dengan "S") hanya boleh mengesan antibodi jenis E

Terdapat bahan kimia (ID bermula dengan "C") yang menguji antibodi E, G dan G4.

Contoh

Contoh aplikasi JS Fiddle
Hanya semak annatto, akar orris, papain dan pyrethrum dalam G dan G4

Tidak terpilih

Disemak

Saya telah melumpuhkan kotak pilihan G dan G4 untuk ID yang bermula dengan "S" menggunakan JS ini:

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
}

Dalam contoh ini saya ingin menukar kelegapan kotak pilihan G dan G4 Quinoline Yellow (#10) kepada 0.25

Soalan

Walaupun saya boleh melumpuhkan kotak pilihan, saya ingin menyatakan kepada doktor bahawa pilihan G dan G4 tidak tersedia dengan menjadikan teks lebih gelap, cth.

Saya tidak tahu bagaimana untuk menyatakannya dalam JS:.g > input + span::before{

Apa yang berlaku apabila tanda soal berada dalam ungkapan ini:

(atau mana-mana pemilih lain yang boleh digunakan)

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

Jika anda mempunyai sebarang idea lain tentang cara melakukan ini, saya mempunyai kawalan penuh ke atas menukar CSS, HTML dan JS.

Contoh di atas yang saya cuba mungkin malang, jadi jangan berat sebelah memikirkan itu cara yang perlu dilakukan.

Halaman ini dijana dengan PHP.

JS const dc dicipta dalam PHP.

Apabila id bermula dengan "S", saya menambah id pada tatasusunan dc JS.

Saya mempunyai banyak fleksibiliti untuk sebarang idea baharu yang boleh anda kaitkan.

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

Kotak Semak Penuh 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

Perkara yang saya pelajari di sini sangat berharga bagi saya. Terima kasih.
Saya telah mencipta rutin JavaScript untuk menyelesaikan masalah ini.

Pautan ke penyelesaian JavaScript JS Fiddle.

Tetapi saya tidak menggunakannya.
Saya lebih suka penyelesaian PHP/HTML.
Semua HTML saya dijana dalam PHP

Ini adalah cara saya menyelesaikan masalah saya.

Saya tunjuk <span> 添加了两个类（dim 和 disable), yang digayakan supaya kelihatan seperti kotak pilihan.

PHP untuk menjana kotak semak:

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 Dijana:
Kelas HTML yang diubah akan ditambahkan pada span> di hujung baris.

Apabila kotak semak id bermula dengan "C"

Apabila kotak semak id bermula dengan "S"

Terdapat dua baris di sini, setiap satu dengan tiga kotak pilihan. Satu dengan C, satu dengan S

 

 
 Pyrethrum


 

 
 Quinoline Yellow (#10)

Answer 2

Anda boleh menggunakan document.querySelectorAll untuk menyelesaikan masalah anda

CSS

.dim::before{
  opacity: 0.3; 
}

Kemudian, tambahkan kelas pada elemen melalui 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"
})

Lihat: https://jsfiddle.net/nfrap0hd/