TechNote

とあるエンジニアのただのメモ

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

あわせて読みたい

jQueryでオシャレかつ機能的なフォーム画面を実装 formly.js - TechNotejQueryでオシャレかつ機能的なフォーム画面を実装 formly.js - TechNote

社内システムだったら必ずフォームのPost送信は多用するし、Webサイトであっても入力画面が存在するところには必ずフォームは必要となる。そんなとき、簡単にオシャ...

jQueryでスライダー機能を実装 - 横幅いっぱいのスライダーFullWideSlider - TechNotejQueryでスライダー機能を実装 - 横幅いっぱいのスライダーFullWideSlider - TechNote

以前のエントリーjQueryでスライダー機能&#...

BootStrap 向けのdatepickerによるカレンダー実装は簡単便利 だけどieには不向きか - TechNoteBootStrap 向けのdatepickerによるカレンダー実装は簡単便利 だけどieには不向きか - TechNote

BootStrap向けのdatepickerによるカレンダー実装が簡単かつ便利だったので使用方法をメモ。1.ダウンロード現在はちゃんと日本語対応版も出ているよう...


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

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