我需要更改的 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
<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"> 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"> 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;} 
我在这里学到的东西对我来说很有价值。谢谢。
我确实创建了一个 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 ' " . $types[4] . " \n";
}' . $selected[$code][4] . "
\n";$none = "No " . $selected[$code][4] . '
';continue;} if(strlen($code)生成的 HTML：
更改后的 HTML 类将添加到该行末尾的
span>中。当复选框
id以“C”开头时当复选框
id以“S”开头时这里有两行，每行三个复选框。一份带有 C，一份带有 S
您可以使用
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/