HTMLでフォームを作成していると入力した値によって入力項目の切り替えなどをしたい場合があります。
jQueryでラジオボタン選択時にセレクトボックスなどのフォームを有効・無効にする方法を記載します。
■ 使用例
【jQuery】
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script><script type="text/javascript">$(function() { // 初期状態のセレクトボックスをdisabledに設定する $("select#specList").attr("disabled", "disabled"); // 「全体」をクリックされた場合 $("#all").click(function(){ // セレクトボックスをdisabledに設定する $('select#specList').attr("disabled", "disabled"); }); // 「指定」をクリックされた場合 $("#spec").click(function(){ // セレクトボックスのdisabledを外す $('select#specList').removeAttr("disabled"); }); });</script> |
【HTML】
1 2 3 4 5 6 7 8 | <label for="all"><input type="radio" name="radio" id="all">全体</label><label for="spec"><input type="radio" name="radio" id="spec">指定</label><select id="specList"> <option value="100">ID:100</option> <option value="200">ID:200</option> <option value="300">ID:300</option></select> |
■ サンプル
「指定」を選択しているときのみ、セレクトボックスが選択可能になっています。
ID:100ID:200ID:300