formで親要素（ラジオボタン）の選択状況により子要素（セレクトメニュー）の選択肢を変更し、未選択の要素は送信しない方法

formで親要素（ラジオボタン）の選択状況により子要素（セレクトメニュー）の選択肢を変更し、未選択の要素は送信しないようにしたかった。ただ、「送信しないようにする」という部分は「display:none;」だと送信されてしまう。この辺りの対応方法をメモ。

やりたいこと

• 親要素はラジオボタンで3つの選択肢があり、いずれかを選択すると対応する子要素のセレクトメニューを表示
• 親要素の3つ目を選択した場合、子要素は第3希望まで選択可
• 選択したもの以外は親要素・子要素いずれも送信させない

対応方法

ソースコード

<form action="" method="get">
    <input type="radio" class="present_radio" name="present" value="1">A賞:カレー
    <br>
    <span id="span_color1" class="span_class" style="display:none;">
        <select name="child" disabled="disabled" class="select_class">
            <option value="1">甘口</option>
            <option value="2">辛口</option>
        </select>
        <br>
    </span>
    <input type="radio" class="present_radio" name="present" value="2">B賞:飲み物
    <br>
    <span id="span_color2" class="span_class" style="display:none;">
        <select name="child" disabled="disabled" class="select_class">
            <option value="1">紅茶</option>
            <option value="2">水</option>
            <option value="3">ビール</option>
        </select>
        <br>
    </span>
    <input type="radio" class="present_radio" name="present" value="3">C賞:おやつ
    <br>
    <span id="span_color3" class="span_class" style="display:none;">第1希望 
        <select name="child" disabled="disabled" class="select_class">
            <option value="1">ケーキ</option>
            <option value="2">パフェ</option>
            <option value="3">プリン</option>
            <option value="4">クッキー</option>
            <option value="5">ゼリー</option>
        </select>
        <br>第2希望 
        <select name="child_2" disabled="disabled" class="select_class">
            <option value="1">ケーキ</option>
            <option value="2">パフェ</option>
            <option value="3">プリン</option>
            <option value="4">クッキー</option>
            <option value="5">ゼリー</option>
        </select>
        <br>第3希望 
        <select name="child_3" disabled="disabled" class="select_class">
            <option value="1">ケーキ</option>
            <option value="2">パフェ</option>
            <option value="3">プリン</option>
            <option value="4">クッキー</option>
            <option value="5">ゼリー</option>
        </select>
        <br>
    </span>
    <input type="submit" value="submit">
</form>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
$(function(){
    // ラジオボタンをクリックした際
    $(document).on('click', '.present_radio', function(){
        // 全てのselectメニューを非表示にする
        $('.span_class').hide();

        // 全てのselectメニューをdisabledにする
        $('.select_class').attr('disabled','disabled');

        // 選択した子要素のselectメニューを表示させる
        $('#span_color' + $(this).val()).show();

        // 選択した子要素のselectメニューのdisabledを解除する
        $('#span_color' + $(this).val()).find('.select_class').removeAttr('disabled');
    });
});
</script>