質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

1回答

215閲覧

【JavaScript・jQuery】フォームで選択したオプションによって選択できる項目を切り替えたいです。

js_shiritai0098

総合スコア0

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2023/05/13 05:18

概要

・ジャージ(トップ・パンツ)の購入を申し込むフォームを作成しています。
・selectタグを使用して『サイズ(S/M/L/不要)』と『注文数(0〜7)』を選択できるようにしたいです。
・サイズを選択しないと、注文数を選択できないようにしたいです。
・「S/M/L」を選んだ場合の注文数は「1〜7」のみを選択できるようにし、不要を選んだ場合の注文数は「0」だけ選択できるようにしたいです。

イメージ説明

 

現状

HTML

1  <form> 2 <section> 3 <h2>ユニフォーム</h2> 4 <dl> 5 <dt class="tooltip">ジャージ(トップ)<abbr class="attention" title="入力必須">必須</abbr></dt> 6 <dd onchange="myfunc()"> 7 <div class="team-uni-container"> 8 <span>サイズ</span> 9 <select name="plugin_form[jersey_top]" class="form_uniform_size"> 10 <option value="">選択して下さい</option> 11 <option value="Sサイズ">Sサイズ(10,600円)</option> 12 <option value="Mサイズ">Mサイズ(10,600円)</option> 13 <option value="Lサイズ">Lサイズ(10,600円)</option> 14 <option value="不要">不要(0円)</option> 15 </select> 16 <input type="hidden" name="plugin_form[__label][jersey_top]" value="ジャージ(トップ):サイズ"> 17 <input type="hidden" name="plugin_form[__require][jersey_top]" value="1"><br> 18 </div> 19 <div class="team-uni-container"> 20 <span>個数</span> 21 <select name="plugin_form[quantity_jersey_top]" class="form_uniform_disselect" disabled> 22 <option value="0">0</option> 23 <option value="1">1</option> 24 <option value="2">2</option> 25 <option value="3">3</option> 26 <option value="4">4</option> 27 <option value="5">5</option> 28 <option value="6">6</option> 29 <option value="7">7</option> 30 </select> 31 <input type="hidden" name="plugin_form[__price][quantity_jersey_top][0]" value="0"> 32 <input type="hidden" name="plugin_form[__price][quantity_jersey_top][1]" value="10600"> 33 <input type="hidden" name="plugin_form[__price][quantity_jersey_top][2]" value="21200"> 34 <input type="hidden" name="plugin_form[__price][quantity_jersey_top][3]" value="31800"> 35 <input type="hidden" name="plugin_form[__price][quantity_jersey_top][4]" value="42400"> 36 <input type="hidden" name="plugin_form[__price][quantity_jersey_top][5]" value="53000"> 37 <input type="hidden" name="plugin_form[__price][quantity_jersey_top][6]" value="63600"> 38 <input type="hidden" name="plugin_form[__price][quantity_jersey_top][7]" value="74200"> 39 <input type="hidden" name="plugin_form[__label][quantity_jersey_top]" value="ジャージ(トップ)個数"> 40 <input type="hidden" name="plugin_form[__require][quantity_jersey_top]" value="1"> 41 </div> 42 </dd> 43 44 <dt class="tooltip">ジャージ(パンツ)<abbr class="attention" title="入力必須">必須</abbr></dt> 45 <dd> 46 <div class="team-uni-container"> 47 <span>サイズ</span> 48 <select name="plugin_form[jersey_pants]" onchange="myfunc()" class="form_uniform_size"> 49 <option value="">選択して下さい</option> 50 <option value="Sサイズ">Sサイズ(8,500円)</option> 51 <option value="Mサイズ">Mサイズ(8,500円)</option> 52 <option value="Lサイズ">Lサイズ(8,500円)</option> 53 <option value="不要">不要(+0円)</option> 54 </select> 55 <input type="hidden" name="plugin_form[__label][jersey_pants]" value="ジャージ(パンツ)"> 56 <input type="hidden" name="plugin_form[__require][jersey_pants]" value="1"> 57 </div> 58 <div class="team-uni-container"> 59 <span>個数</span> 60 <select name="plugin_form[quantity_jersey_pants]" class="form_uniform_disselect" disabled> 61 <option value="0">0</option> 62 <option value="1">1</option> 63 <option value="2">2</option> 64 <option value="3">3</option> 65 <option value="4">4</option> 66 <option value="5">5</option> 67 <option value="6">6</option> 68 <option value="7">7</option> 69 </select> 70 <input type="hidden" name="plugin_form[__price][quantity_jersey_pants][0]" value="0"> 71 <input type="hidden" name="plugin_form[__price][quantity_jersey_pants][1]" value="8500"> 72 <input type="hidden" name="plugin_form[__price][quantity_jersey_pants][2]" value="17000"> 73 <input type="hidden" name="plugin_form[__price][quantity_jersey_pants][3]" value="25500"> 74 <input type="hidden" name="plugin_form[__price][quantity_jersey_pants][4]" value="34000"> 75 <input type="hidden" name="plugin_form[__price][quantity_jersey_pants][5]" value="42500"> 76 <input type="hidden" name="plugin_form[__price][quantity_jersey_pants][6]" value="51000"> 77 <input type="hidden" name="plugin_form[__price][quantity_jersey_pants][7]" value="59500"> 78 <input type="hidden" name="plugin_form[__label][quantity_jersey_pants]" value="ジャージ(パンツ) 個数"> 79 <input type="hidden" name="plugin_form[__require][quantity_jersey_pants]" value="1"> 80 </div> 81 </dd> 82  </form>

→同様の項目を20個ほど表示させる予定です。

JS

1function myfunc() { 2 let elements = document.getElementsByClassName("form_uniform_disselect"); 3 let len = elements.length; 4 var sele_val = document.getElementsByClassName("form_uniform_size")[0].value; 5 console.log(len) 6 if(sele_val !== "不要") { 7 // disabled属性を削除 8 for (let i = 0; i < len; i++){ 9 elements.item(i).removeAttribute("disabled"); 10 } 11 $(".form_uniform_disselect option[value='0']").prop('disabled', true); 12 $(".form_uniform_size option[value='']").prop('disabled', true); 13 $(".form_uniform_disselect option[value='1']").removeProp("disabled"); 14 $(".form_uniform_disselect option[value='2']").removeProp("disabled"); 15 $(".form_uniform_disselect option[value='3']").removeProp("disabled"); 16 $(".form_uniform_disselect option[value='4']").removeProp("disabled"); 17 $(".form_uniform_disselect option[value='5']").removeProp("disabled"); 18 $(".form_uniform_disselect option[value='6']").removeProp("disabled"); 19 $(".form_uniform_disselect option[value='7']").removeProp("disabled"); 20 $(".form_uniform_disselect option[value='1']").prop('selected', true); 21 }else { 22 // disabled属性を設定 23 for (let i = 0; i < len; i++){ 24 elements.item(i).removeAttribute("disabled"); 25 } 26 $(".form_uniform_disselect option[value='0']").removeProp("disabled"); 27 $(".form_uniform_disselect option[value='0']").prop('selected', true); 28 $(".form_uniform_disselect option[value='1']").prop('disabled', true); 29 $(".form_uniform_disselect option[value='2']").prop('disabled', true); 30 $(".form_uniform_disselect option[value='3']").prop('disabled', true); 31 $(".form_uniform_disselect option[value='4']").prop('disabled', true); 32 $(".form_uniform_disselect option[value='5']").prop('disabled', true); 33 $(".form_uniform_disselect option[value='6']").prop('disabled', true); 34 $(".form_uniform_disselect option[value='7']").prop('disabled', true); 35 } 36}

実現したいこと

・それぞれの項目で「サイズ・注文数」JSで制御したいです。

 

発生している問題

上記のコードで実現したい動作できているんですが、classで制御しているため、ジャージ(トップ)でサイズを選択するとジャージ(パンツ)の項目も勝手に選択されてしまいます。
idで制御すればいいのはわかっているんですが、どうしてもJS側のコードが長くなってしまうので悩んでいます。なるべく短くシンプルなコードを使いたいです。

よろしくお願いいたします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

サイズselectを変更したとき、対応する個数selectだけを処理したいのですね。$(".form_uniform_disselect option...') とすると文書全体から探してしまうので不適切です。
以下のように、change イベントリスナでイベントオブジェクトを受け取って、そこから変更された select とその相対位置にある個数select、その相対位置にある option などを得てください。

js

1for (let sizeSelect of document.querySelectorAll('.form_uniform_size')) { 2 sizeSelect.addEventListener('change', event => { 3 let sele_val = event.target.value; 4 let countSelect = event.target.closest('dd').querySelector('.form_uniform_disselect'); 5 countSelect.disabled = false; 6 if (sele_val !== "不要") { 7 countSelect.querySelector('option[value="0"]').disabled = ...; 8 ... 9 }); 10}

投稿2023/05/14 22:10

int32_t

総合スコア20659

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問