我需要更改的 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.19rem；顶部：0.12rem；}

我想要一个不使用 CSS 变量的解决方案。

这不仅仅是一个 JS 和 CSS 问题。

这不是一个关于伪元素的问题

此页面不是静态的。

此应用程序中有超过 2,000 个复选框。

在任何给定时间点显示的复选框子集都是非常动态的。

HTML

 

 
 Pyrethrum

 

 
 Quinoline Yellow (#10)

说明

这些是医生订购化学过敏血液测试的订单输入复选框。

有些化学物质（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;}