人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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件

▽最新の回答へ

質問者から

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


1 ● a-kuma3
●200ポイント ベストアンサー

こんな感じでしょうか。

<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/


としさんのコメント
回答有難うございます。うまくいきました。 すみません、追記でお願いしたいのですが、現状だとまだラジオボタン選択できてしまうので、 input 属性に disabled (無効) を追加して、かつ checked(選択済の場合) が入っていたら削除したいのですが、、可能でしょうか? ご教授宜しくお願いします。

a-kuma3さんのコメント
>> input 属性に disabled (無効) を追加して、かつ checked(選択済の場合) が入っていたら削除したいのですが、、可能でしょうか? << 回答に追記しました。

としさんのコメント
有難うございます。思い通りになりました。 教えていただき助かりました。また機会あればよろしくお願いいたします。
関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ