ECサイト作成してまして、品切れ中の時に明確にするため、

下記ソースにjavascript等でclass要素に追加したいのですが、
どう記述すればよいか教えていただけますでしょうか?

---------ここから--------
<div id="product_class">
 <div class="radio">
  <label class="required"> ←次の行に(品切れ中)と文言がある場合、ここにクラスを追加したい
   <input type="radio" id="product_class_0" name="product_class" /> アイテム1(品切れ中)
    </label>
 </div>

 <div class="radio">
  <label class="required">
    <input type="radio" id="product_class_1" name="product_class" /> アイテム2
  </label>
 </div>
</div>
---------ここまで--------

回答の条件
  • 1人1回まで
  • 登録:
  • 終了:2017/07/26 21:58:57
※ 有料アンケート・ポイント付き質問機能は2023年2月28日に終了しました。
id:yato12

補足です。ページ読み込みしたときに反映させたいです。宜しくお願いします。

ベストアンサー

id:a-kuma3 No.1

回答回数4973ベストアンサー獲得回数2154

ポイント200pt

こんな感じでしょうか。

<script>
window.addEventListener("DOMContentLoaded", function() {
    Array.prototype.forEach.call(document.querySelectorAll("label.required"), function(label) {
        if (/品切れ中/.test(label.textContent)) {
            label.classList.add("soldout");
        }
    });
});
</script>

require がクラスに入っている LABEL 要素を探して、その中に「品切れ中」の文字があった場合に、soldout というクラスを LABEL に追加しています。

jsFiddle で試してみたのがこちら。
https://jsfiddle.net/pyn07v8y/



追記です。

input 属性に disabled (無効) を追加して、かつ checked(選択済の場合) が入っていたら削除したいのですが、、可能でしょうか?

こんな感じ。

window.addEventListener("DOMContentLoaded", function() {
  Array.prototype.forEach.call(document.querySelectorAll("label.required"), function(label) {
    if (/品切れ中/.test(label.textContent)) {
      label.classList.add("soldout");
      let chk = label.querySelector('input[type="radio"]');
      if (chk) {
        chk.disabled = true;
        chk.checked = false;
      }
    }
  })
})

jsFiddle のコードも変更してみました。
https://jsfiddle.net/a_kuma3/pyn07v8y/1/

他1件のコメントを見る
id:a-kuma3

input 属性に disabled (無効) を追加して、かつ checked(選択済の場合) が入っていたら削除したいのですが、、可能でしょうか?

回答に追記しました。

2017/07/26 21:11:08
id:yato12

有難うございます。思い通りになりました。
教えていただき助かりました。また機会あればよろしくお願いいたします。

2017/07/26 21:58:29

その他の回答0件)

id:a-kuma3 No.1

回答回数4973ベストアンサー獲得回数2154ここでベストアンサー

ポイント200pt

こんな感じでしょうか。

<script>
window.addEventListener("DOMContentLoaded", function() {
    Array.prototype.forEach.call(document.querySelectorAll("label.required"), function(label) {
        if (/品切れ中/.test(label.textContent)) {
            label.classList.add("soldout");
        }
    });
});
</script>

require がクラスに入っている LABEL 要素を探して、その中に「品切れ中」の文字があった場合に、soldout というクラスを LABEL に追加しています。

jsFiddle で試してみたのがこちら。
https://jsfiddle.net/pyn07v8y/



追記です。

input 属性に disabled (無効) を追加して、かつ checked(選択済の場合) が入っていたら削除したいのですが、、可能でしょうか?

こんな感じ。

window.addEventListener("DOMContentLoaded", function() {
  Array.prototype.forEach.call(document.querySelectorAll("label.required"), function(label) {
    if (/品切れ中/.test(label.textContent)) {
      label.classList.add("soldout");
      let chk = label.querySelector('input[type="radio"]');
      if (chk) {
        chk.disabled = true;
        chk.checked = false;
      }
    }
  })
})

jsFiddle のコードも変更してみました。
https://jsfiddle.net/a_kuma3/pyn07v8y/1/

他1件のコメントを見る
id:a-kuma3

input 属性に disabled (無効) を追加して、かつ checked(選択済の場合) が入っていたら削除したいのですが、、可能でしょうか?

回答に追記しました。

2017/07/26 21:11:08
id:yato12

有難うございます。思い通りになりました。
教えていただき助かりました。また機会あればよろしくお願いいたします。

2017/07/26 21:58:29

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

回答リクエストを送信したユーザーはいません