概要
・ジャージ(トップ・パンツ)の購入を申し込むフォームを作成しています。
・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側のコードが長くなってしまうので悩んでいます。なるべく短くシンプルなコードを使いたいです。
よろしくお願いいたします。

下記のような回答は推奨されていません。
このような回答には修正を依頼しましょう。
また依頼した内容が修正された場合は、修正依頼を取り消すようにしましょう。