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

Question

概要

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

　

現状

　　<form>
                <section>
                    <h2>ユニフォーム</h2>
                    <dl>
                        <dt class="tooltip">ジャージ（トップ）<abbr class="attention" title="入力必須">必須</abbr></dt>
                        <dd onchange="myfunc()">
                            <div class="team-uni-container">
                                <span>サイズ</span>
                                <select name="plugin_form[jersey_top]" class="form_uniform_size">
                                    <option value="">選択して下さい</option>
                                    <option value="Sサイズ">Sサイズ（10,600円）</option>
                                    <option value="Mサイズ">Mサイズ（10,600円）</option>
                                    <option value="Lサイズ">Lサイズ（10,600円）</option>
                                    <option value="不要">不要（0円）</option>
                                </select>
                                <input type="hidden" name="plugin_form[__label][jersey_top]" value="ジャージ（トップ）：サイズ">
                                <input type="hidden" name="plugin_form[__require][jersey_top]" value="1"><br>
                            </div>
                            <div class="team-uni-container">
                                <span>個数</span>
                                <select name="plugin_form[quantity_jersey_top]" class="form_uniform_disselect" disabled>
                                    <option value="0">0</option>
                                    <option value="1">1</option>
                                    <option value="2">2</option>
                                    <option value="3">3</option>
                                    <option value="4">4</option>
                                    <option value="5">5</option>
                                    <option value="6">6</option>
                                    <option value="7">7</option>
                                </select>
                                <input type="hidden" name="plugin_form[__price][quantity_jersey_top][0]" value="0">
                                <input type="hidden" name="plugin_form[__price][quantity_jersey_top][1]" value="10600">
                                <input type="hidden" name="plugin_form[__price][quantity_jersey_top][2]" value="21200">
                                <input type="hidden" name="plugin_form[__price][quantity_jersey_top][3]" value="31800">
                                <input type="hidden" name="plugin_form[__price][quantity_jersey_top][4]" value="42400">
                                <input type="hidden" name="plugin_form[__price][quantity_jersey_top][5]" value="53000">
                                <input type="hidden" name="plugin_form[__price][quantity_jersey_top][6]" value="63600">
                                <input type="hidden" name="plugin_form[__price][quantity_jersey_top][7]" value="74200">
                                <input type="hidden" name="plugin_form[__label][quantity_jersey_top]" value="ジャージ（トップ）個数">
                                <input type="hidden" name="plugin_form[__require][quantity_jersey_top]" value="1">
                            </div>
                        </dd>

                        <dt class="tooltip">ジャージ（パンツ）<abbr class="attention" title="入力必須">必須</abbr></dt>
                        <dd>
                            <div class="team-uni-container">
                                <span>サイズ</span>
                                <select name="plugin_form[jersey_pants]" onchange="myfunc()" class="form_uniform_size">
                                    <option value="">選択して下さい</option>
                                    <option value="Sサイズ">Sサイズ（8,500円）</option>
                                    <option value="Mサイズ">Mサイズ（8,500円）</option>
                                    <option value="Lサイズ">Lサイズ（8,500円）</option>
                                    <option value="不要">不要（＋0円）</option>
                                </select>
                                <input type="hidden" name="plugin_form[__label][jersey_pants]" value="ジャージ（パンツ）">
                                <input type="hidden" name="plugin_form[__require][jersey_pants]" value="1">
                            </div>
                            <div class="team-uni-container">
                                <span>個数</span>
                                <select name="plugin_form[quantity_jersey_pants]" class="form_uniform_disselect" disabled>
                                    <option value="0">0</option>
                                    <option value="1">1</option>
                                    <option value="2">2</option>
                                    <option value="3">3</option>
                                    <option value="4">4</option>
                                    <option value="5">5</option>
                                    <option value="6">6</option>
                                    <option value="7">7</option>
                                </select>
                                <input type="hidden" name="plugin_form[__price][quantity_jersey_pants][0]" value="0">
                                <input type="hidden" name="plugin_form[__price][quantity_jersey_pants][1]" value="8500">
                                <input type="hidden" name="plugin_form[__price][quantity_jersey_pants][2]" value="17000">
                                <input type="hidden" name="plugin_form[__price][quantity_jersey_pants][3]" value="25500">
                                <input type="hidden" name="plugin_form[__price][quantity_jersey_pants][4]" value="34000">
                                <input type="hidden" name="plugin_form[__price][quantity_jersey_pants][5]" value="42500">
                                <input type="hidden" name="plugin_form[__price][quantity_jersey_pants][6]" value="51000">
                                <input type="hidden" name="plugin_form[__price][quantity_jersey_pants][7]" value="59500">
                                <input type="hidden" name="plugin_form[__label][quantity_jersey_pants]" value="ジャージ（パンツ） 個数">
                                <input type="hidden" name="plugin_form[__require][quantity_jersey_pants]" value="1">
                            </div>
                        </dd>
　　</form>

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

function myfunc() {
    let elements = document.getElementsByClassName("form_uniform_disselect");
    let len = elements.length;
    var sele_val = document.getElementsByClassName("form_uniform_size")[0].value;
    console.log(len)
    if(sele_val !== "不要") {
        // disabled属性を削除
        for (let i = 0; i < len; i++){
            elements.item(i).removeAttribute("disabled");
        }
        $(".form_uniform_disselect option[value='0']").prop('disabled', true);
        $(".form_uniform_size option[value='']").prop('disabled', true);
        $(".form_uniform_disselect option[value='1']").removeProp("disabled");
        $(".form_uniform_disselect option[value='2']").removeProp("disabled");
        $(".form_uniform_disselect option[value='3']").removeProp("disabled");
        $(".form_uniform_disselect option[value='4']").removeProp("disabled");
        $(".form_uniform_disselect option[value='5']").removeProp("disabled");
        $(".form_uniform_disselect option[value='6']").removeProp("disabled");
        $(".form_uniform_disselect option[value='7']").removeProp("disabled");
        $(".form_uniform_disselect option[value='1']").prop('selected', true);
    }else {
        // disabled属性を設定
        for (let i = 0; i < len; i++){
            elements.item(i).removeAttribute("disabled");
        }
        $(".form_uniform_disselect option[value='0']").removeProp("disabled");
        $(".form_uniform_disselect option[value='0']").prop('selected', true);
        $(".form_uniform_disselect option[value='1']").prop('disabled', true);
        $(".form_uniform_disselect option[value='2']").prop('disabled', true);
        $(".form_uniform_disselect option[value='3']").prop('disabled', true);
        $(".form_uniform_disselect option[value='4']").prop('disabled', true);
        $(".form_uniform_disselect option[value='5']").prop('disabled', true);
        $(".form_uniform_disselect option[value='6']").prop('disabled', true);
        $(".form_uniform_disselect option[value='7']").prop('disabled', true);
    }
}

実現したいこと

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

　

発生している問題

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

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

Answer 1

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

for (let sizeSelect of document.querySelectorAll('.form_uniform_size')) {
  sizeSelect.addEventListener('change', event => {
    let sele_val = event.target.value;
    let countSelect = event.target.closest('dd').querySelector('.form_uniform_disselect');
    countSelect.disabled = false;
    if (sele_val !== "不要") {
      countSelect.querySelector('option[value="0"]').disabled = ...;
      ...
  });
}