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();
});