搜尋

首頁  >  問答  >  主體

使用 JavaScript 根據元素 ID 變更複選框 CSS

我需要更改的 CSS

我正在尋找如何表達 .g > 輸入 span 和

如何將樣式屬性設定僅套用於 ID 以“S”開頭的複選框元素。

.g > 輸入span::before {font-weight:400;content: 'G';color:#000;display: block;text-align: center;position: Absolute ；左：0.36rem；上：0.12rem；}

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

我想要一個不使用 CSS 變數的解決方案。

# 這不僅僅是一個 JS 和 CSS 問題。

這不是一個關於偽元素的問題

#此頁面不是靜態的。

此應用程式中有超過 2,000 個複選框。

在任何給定時間點顯示的複選框子集都是非常動態的。

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>

說明

這些是醫生訂購化學過敏血液測試的訂單輸入複選框。

有些化學物質（ID以“S”開頭）只能檢測E型抗體

有一些化學物質（ID 以“C”開頭）可以測試 E、G 和 G4 抗體。

範例

# JS Fiddle 應用程式範例
只能檢查 G 和 G4 中的胭脂樹橙、鳶尾根、木瓜蛋白酶和除蟲菊

#未選取

已檢查

我已經用這個JS禁用了「以「S」開頭的ID的複選框G和G4：

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
}

在此範例中，我想將喹啉黃 (#10) 的 G 和 G4 複選框的不透明度更改為 0.25

問題

雖然我可以停用這些複選框，但我想透過使文字變暗來向醫生表明 G 和 G4 選擇不可用，例如“G”和“G4”。

我不知道如何用JS表達：.g > input span::before{

此表達式中問號所在的位置會出現什麼：

（或其他可以使用的其他選擇器）

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

如果您對如何執行此操作有任何其他想法，我可以完全控制更改 CSS、HTML 和 JS。

# 我嘗試的上面的例子可能是不幸的，所以不要偏見地認為這就是它需要完成的方式。

該頁面是用 PHP 產生的。

JS const dc 是在 PHP 中建立的。

當 id 以“S”開頭時，我將該 ID 新增到 JS dc 陣列中。

對於您能理解的任何新想法，我都有很大的靈活性。 

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

完整複選框 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;}

P粉832212776P粉832212776302 天前364

全部回覆(2)我來回復

  • P粉716228245

    P粉7162282452024-02-04 18:00:46

    我在這裡學到的東西對我來說很有價值。謝謝。
    我確實創建了一個 JavaScript 例程來解決這個問題。

    連結到 JS Fiddle JavaScript 解決方案。

    但我沒有使用它。
    我比較喜歡 PHP/HTML 解決方案。
    我所有的 HTML 都是用 PHP 產生的

    #這是我解決問題的方法。

    # 我向 <span> 添加了兩個類別（dim 和 disable），其樣式看起來像複選框。

    產生複選框的 PHP：

    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) < 4){continue;}
  echo "
    

    

    

    

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

}

    產生的 HTML：
    更改後的 HTML 類別將會加入到該行末尾的 span> 中。

    當複選框 id 以“C”開頭時

    當複選框 id 以“S”開頭時

    這裡有兩行，每行三個複選框。一份帶有 C，一份帶有 S

    

    

    

    

     Pyrethrum
    

    

    

    

    

     Quinoline Yellow (#10)

    回覆
    0
  • P粉041758700

    P粉0417587002024-02-04 10:54:31

    您可以使用 document.querySelectorAll 來解決您的問題

    CSS

    .dim::before{
  opacity: 0.3; 
}

    然後，透過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"
})

    請參閱：https://jsfiddle.net/nfrap0hd/

    回覆
    0
  • 取消回覆