selectで特定のoptionが選択されたときもう1つのセレクトを有効無効の操作をしたい

Question

<select> <option disabled selected>選択してください</option> <option>本人</option> <option>配偶者</option> <option>父母</option> <option>祖父母</option> </select> <select> <option disabled selected>選択してください</option> <option>同居</option> <option>別居</option> </select>

上記の1つめのセレクトボックスで本人を選択した場合は、2つめのセレクトボックスを無効化、
本人以外が選択された場合は、2つめのセレクトボックスが有効化されるようにしたいのですがうまくいきません。

jQueryならある程度わかるのですが、javascriptはあまり理解できていないので、jQueryで実装可能であればそちらで回答いただますと幸いです。

ご教授宜しくお願い致します。

Answer 1

optionにきちんとvalueを指定してください
selectにidなどふってアクセス性をあげてください

Comments

[yambejp]

<script>
window.addEventListener('DOMContentLoaded', ()=>{
document.querySelector('#zokugara').addEventListener('change',e=>{
var v=e.target.value;
var flg=["","本人"].indexOf(v)>-1;
document.querySelector('#dokyo').disabled=flg;
document.querySelector('#dokyo').selectedIndex=0;
});
document.querySelector('#dokyo').disabled=true;
});
</script>

<select id="zokugara">
<option value="" selected>選択してください</option>
<option value="本人">本人</option>
<option value="配偶者">配偶者</option>
<option value="父母">父母</option>
<option value="祖父母">祖父母</option>
</select>

<select id="dokyo">
<option value="" selected>選択してください</option>
<option value="同居">同居</option>
<option value="別居">別居</option>
</select>

[rinrin1137]

ありがとうございます。
無事に動きました。

jQueryならvalで値を取得してif文で分ける感じでしょうか？

[yambejp]

jQuery Version
$(function(){
$('#zokugara').on('change',function(){
var flg=$.inArray($(this).val(),["","本人"])>-1;
$('#dokyo').prop({disabled:flg,selectedIndex:0});
}).trigger('change');
});

[rinrin1137]

まだまだ勉強不足だと実感いたしました。
ご回答いただきありがとうございました。