JavaScriptを使用して要素IDに基づいてチェックボックスのCSSを変更する

Question

CSS を変更する必要があります

.g >入力spanと

を表現する方法を探しています ID が「S」で始まるチェックボックス要素にのみスタイル属性設定を適用する方法。

.g > 「span::before {font-weight:400;content: 'G';color:#000;display: block;text-align: center;position: Absolute;」と入力します。左: 0.36 レム; 上: 0.12 レム;}

.g4 >span::before {font-weight:400;content: 'G4';color:#000;display: block;text-align: center;position: Absolute;left: 0.19 を入力してくださいレム;トップ:0.12レム;}

CSS 変数を使用しないソリューションが必要です。

これは JS と CSS だけの問題ではありません。

これは疑似要素に関する質問ではありません

このページは静的ではありません。

このアプリケーションには 2,000 を超えるチェックボックスがあります。

任意の時点で表示されるチェックボックスのサブセットは非常に動的です。

HTML

リーリー

イラスト

これらは、化学アレルギーの血液検査をオーダーする医師のためのオーダー入力チェックボックスです。

一部の化学物質 (「S」で始まる ID) は E 型抗体のみを検出できます

E、G、G4 抗体を検査する化学薬品 (「C」で始まる ID) があります。

＃＃＃＃＃＃例＃＃＃＃＃＃＃＃＃ JS Fiddle アプリケーションの例

G および G4 ではアナトー、オリス ルート、パパイン、除虫菊のみをチェックします

未選択

チェック済み

この JS を使用して、「S」で始まる ID のチェックボックス G と G4 を無効にしました:

JavaScript

リーリー

この例では、キノリンイエロー (#10) の G および G4 チェックボックスの不透明度を 0.25 に変更します。 ＃＃＃質問＃＃＃

これらのチェックボックスを無効にすることもできますが、「G」や「G4」などのテキストを暗くすることで、G および G4 の選択が利用できないことを医師に示したいと思います。 JS で表現する方法がわかりません:

.g > inputspan::before{

この式の疑問符の部分に表示される内容:

(または使用できる他のセレクター)

リーリー

これを行う方法について他にアイデアがある場合は、CSS、HTML、および JS の変更を完全に制御できます。

私が試した上記の例はおそらく残念なものでした。そのため、そうする必要があると偏見を持たないでください。

このページは PHP を使用して生成されています。

JS const dc は PHP で作成されます。

ID が「S」で始まる場合、その ID を JS dc 配列に追加します。

あなたが共感できる新しいアイデアには柔軟に対応します。

リーリー

完全なチェックボックス CSS

ああああ

Answer 1

ここで学んだことは私にとってとても貴重です。ありがとう。
この問題を解決するために JavaScript ルーチンを作成しました。

JS Fiddle JavaScript ソリューションへのリンク。

しかし、私はそれを使いませんでした。
私は PHP/HTML ソリューションを好みます。
私の HTML はすべて PHP

を使用して生成されています これが私が問題を解決した方法です。

チェックボックスのように見える 2 つのクラス (dim と disable) を <span> に追加しました。

チェックボックスの PHP を生成:

リーリー

生成された HTML:
変更された HTML クラスは、行末の span> に追加されます。

チェックボックス id が「C」で始まる場合

リーリー

チェックボックス id が「S」で始まる場合

リーリー

ここには 2 つの行があり、それぞれに 3 つのチェックボックスがあります。 1 つは C、もう 1 つは S

リーリー

Answer 2

document.querySelectorAll を使用して問題を解決できます

CSSS

リーリー

次に、JavaScript を使用して要素にクラスを追加します。 リーリー

参照:

https://jsfiddle.net/nfrap0hd/