【selectボックス】選択した項目によってdisabledにする方法

今回はselectボックスをdisabledにする方法と複数選択で選択された項目によってもう一つのselectボックスをdisabledにするという方法を紹介していきます。

• selectボックスをdisabledにする方法
• 複数選択で選択された項目によってdisabledにする方法

selectbox

disabledさせる方法

disabledさせると選択ができなくなります。

書き方は簡単でselectボックスのタグに「disabled」を追加させるだけです。

<select name="list" disabled>
    <option value="1">項目</option>
～
</select>

disabledさせるだけなら簡単ですね。

複数選択の場合

今度は複数選択の場合になります。

たとえばselectボックスが複数あるとしましょう。

一つ目を選択します。

選択された項目によってもう一つのselectボックスが「disabled」になります。

html

<h2>時間指定</h2>
<div class="select-pt1">
        <select name="delivery">
		<option value="a" selected>時間指定なし</option>
		<option value="b">時間指定あり</option>
	</select>
</div>

<div class="select-pt2">
        <select name="delivery1" disabled>
		<option value="0">指定なし</option>
		<option value="1">午前中</option>
		<option value="2">午後(12～18時)</option>
		<option value="3">夜間(18～21時)</option>
	</select>
</div> 

よくあるパターンとして時間指定を例にします。

サイトなどで商品を買ったときに時間を指定するかしないかを選択します。

時間指定ありを選択すると次の項目を選択することができます。

逆に時間指定なしにすると次の項目は選択できないといった形です。

js

jQuery(function() {
        jQuery('.select-pt1 select').change(function() {
               
                let selected_text = jQuery(this).children('option:selected').text();
                let data = '時間指定なし';
               
                if(selected_text.indexOf(data) > -1) {
                        jQuery('.select-pt2').children('select').prop('disabled', true);
                }else{
                        jQuery('.select-pt2').children('select').prop('disabled', false);
                }
  });
});

サンプル