jQuery セレクトボックスである値を選んだときだけテキストボックスを有効化する方法

スポンサーリンク

今後もよく使いそうなのでメモ。

f:id:kojikoji75:20140520223549j:plain
photo credit: “Cowboy” Ben Alman via photopin cc

例えば下図のように、左のセレクトボックスで「その他」を選択したときのみ右のテキストボックスがabledとなるようにはどのように書けばよいか?

f:id:kojikoji75:20140520223612j:plain

html

<select name="sample" id="sample_select">
<option value="1">いち</option>
<option value="2"></option>
<option value="3">さん</option>
<option value="4">よん</option>
<option value="5">その他</option>
</select>
その他:<input type="text" name="sampleother" id="sample_input" disabled="disabled">

jQuery

$('#sapmle_select').on('change',function(){
var chk=$(this).prop('selectedIndex'),
obj=$('#sample_input');
(chk==5)?obj.prop('disabled',false):obj.prop('disabled',true);
});

注意

selectedIndexは「上から数えて何番目」という値なので、現状は「その他」は5番目ですが、もしマスタ追加などで表示順序が「その他」より上にくるようなものが追加された場合は、(chk==5)?の条件文も書き直す必要があります。

問題点

上記の方法だと、例えば「入力確認画面」に遷移した後、ユーザがブラウザの「戻る」ボタンや、「戻って修正」ボタン(history.back)を押したときに、入力画面に戻ったらabled/disabledは保持されません。

解決方法

以下のように書き換えることで上記は解決します。

function control_input() {
var chk,
obj = $('#sample_input');
chk = document.getElementById('sample_select').selectedIndex;
(chk==5) ? obj.prop('disabled',false) : obj.prop('disabled',true) ;
}
$(function() {
$('#sample_select').on('change', control_input);
control_input();
});

Web制作の現場で使うjQueryデザイン入門[改訂新版] (WEB PROFESSIONAL)

Web制作の現場で使うjQueryデザイン入門[改訂新版] (WEB PROFESSIONAL)

コアjQuery+プラグイン/jQuery UI 開発実践技法 (Programmer’s SELECTION)

コアjQuery+プラグイン/jQuery UI 開発実践技法 (Programmer’s SELECTION)

タイトルとURLをコピーしました