radioボタンを押すたびにSelectの状態を制御するJQueryを作りたいが、処理が引き継がれてしまう

Question

やりたいこと

radioボタンを押すたびにSelectの状態を制御するJQueryを作りたい。

制御の内容

1.ラジオボタンで会場を京都会場を、次にセレクトで日時を4月29日に選んだとき、時間の選択肢の内10:00の選択肢を選択不可（disabled）にしたい。
2.ラジオボタンで会場を大阪会場を、次にセレクトで日時を5月6日に選んだとき、時間の選択肢の内11:00の選択肢を選択不可（disabled）にしたい。

HTML

<table>
<tbody>
<tr>
                <th>会場</th>
                <td class="shop">
                    <div><input type="radio" name="会場" value="京都会場" id="kyoto" />京都会場<input type="radio" name="会場" value="大阪会場" id="osaka"/>大阪会場</span></div>
                </td>
            </tr>
            <tr>
                <th>日時<span class="must">必須</span></th>
                <td>
                    <span class="formParts"><select required="required" name="希望日" class="selectS" style="width: 18%;" id="goraitenDay">
                            <option value="" selected="selected"></option>
                            <option value="4月29日" id="day1">4月29日</option>
                            <option value="5月6日" id="day2">5月6日</option>
                            <option value="5月31日" id="day3">5月31日</option>
                        </select></span>
                </td>
            </tr>
            <tr>
                <th>希望時間<span class="must">必須</span></th>
                <td><span class="formParts"><select required="required" name="時間" class="selectS" id="goraitenTime" disabled="disabled">
                            <option value="" selected="selected">時間</option>
                            <option value="9:00">9:00</option>
                            <option value="9:30">9:30</option>
                            <option value="10:00">10:00</option><!--京都会場で4月29日の時にはここを選択不可にしたい-->
                            <option value="10:30">10:30</option>
                            <option value="11:00">11:00</option><!--大阪会場で5月6日の時にはここを選択不可にしたい-->
                            <option value="11:30">11:30</option>
                            <option value="12:00">12:00</option>
                            <option value="12:30">12:30</option>
                            <option value="13:00">13:00</option>
                            <option value="13:30">13:30</option>
                            <option value="14:00">14:00</option>
                            <option value="14:30">14:30</option>
                            <option value="15:00">15:00</option>
                            <option value="15:30">15:30</option>
                            <option value="16:00">16:00</option>
                        </select></span>
                </td>
            </tr>
</tbody>
</table>

JQuery

$(function() {
        $('input#kyoto').on('click', function() {
            $('select#goraitenDay').on('change', function() {
                $('[name=時間] option[value="10:00"]').prop('disabled', $(this).val() == "4月29日");
            });
        });
    });
 $(function() {
        $('input#osaka').on('click', function() {
            $('select#goraitenDay').on('change', function() {
                $('[name=時間] option[value="11:00"]').prop('disabled', $(this).val() == "5月6日");
            });
        });
    });

困っているところ

それぞれの処理はうまく行くのですが、一度京都会場を選んだ後に大阪会場を選ぶと京都会場の処理が引き継がれてしまいます。（京都会場を選んだ時のみ4月29日の10:00を選択不可にしたいが、大阪会場を選んだ時にも4月29日の10:00が選択不可になっている）
別のラジオボタンを押した時に処理を引き継がないようにしたい。

自分なりに試したこと

調べたところクリックごとにイベントをリセットしなければいけないとわかったので.off()を試したところうまくいかず………

どなたかご教授のほど、よろしくお願いいたします。

Answer 1

トリガーになるラジオボタンやセレクトボックスに共通のclass(たとえばhoge)を
あえてやると簡潔にかけます

Comments

[yambejp]

<script>
$(function(){
$('.hoge').on('change',function(){
$('[name=時間] option[value="10:00"]').prop('disabled',$('[name=会場][value=京都会場]').is(':checked') && $('[name=希望日]').val()=="4月29日");
$('[name=時間] option[value="11:00"]').prop('disabled',$('[name=会場][value=大阪会場]').is(':checked') && $('[name=希望日]').val()=="5月6日");
})
});
</script>

[yambejp]

//HTML

<label><input type="radio" name="会場" value="京都会場" id="kyoto" class="hoge" />京都会場</label>
<label><input type="radio" name="会場" value="大阪会場" id="osaka" class="hoge" />大阪会場</label>
<select required="required" name="希望日" class="selectS hoge" id="goraitenDay">
<option> ・・・

[sunD-m]

うまくいきました！ご回答ありがとうございました。

[sunD-m]

先日はご回答いただきありがとうございました。連続した質問になってしまい申し訳ないのですが、先日ご提示いただいたコードについてお聞きしたいことがございます。
<script>
$(function(){
$('.hoge').on('change',function(){
$('[name=時間] option[value="10:00"]').prop('disabled',$('[name=会場][value=京都会場]').is(':checked') && $('[name=希望日]').val()=="4月29日");
$('[name=時間] option[value="11:00"]').prop('disabled',$('[name=会場][value=大阪会場]').is(':checked') && $('[name=希望日]').val()=="5月6日");
})
});
</script>

となっているところ
京都会場も5月6日を選択した時には10:30、11:00が選択不可になるようにしたい場合は

<script>
$(function(){
$('.hoge').on('change',function(){
$('[name=時間] option[value="10:00"]').prop('disabled',$('[name=会場][value=京都会場]').is(':checked') && $('[name=希望日]').val()=="4月29日");
$('[name=時間] option[value="10:30"],[name=時間] option[value="11:00"]').prop('disabled',$('[name=会場][value=京都会場]').is(':checked') && $('[name=希望日]').val()=="5月6日");
$('[name=時間] option[value="11:00"]').prop('disabled',$('[name=会場][value=大阪会場]').is(':checked') && $('[name=希望日]').val()=="5月6日");
})
});
</script>

という記述であっているでしょうか。

[yambejp]

条件が複雑になる場合はリストを作って対応するとよいでしょう

$(function(){
var disable=[
{time:"10:00",date:"4月29日",venue:"京都会場"},
{time:"11:00",date:"5月6日", venue:"大阪会場"},
{time:"10:30",date:"5月6日", venue:"京都会場"},
{time:"11:00",date:"5月6日", venue:"京都会場"},
];
$('.hoge').on('change',function(){
$('[name=時間] option').prop('disabled',false);
disable.forEach(x=>{
if($(`[name=会場][value="${x.venue}"]`).is(':checked') && $('[name=希望日]').val()==x.date){
$(`[name=時間] option[value="${x.time}"]`).prop('disabled',true);
};
});
});
});