WEBアンケートとかによくあるパターンで使えるかな的関数
ラジオボタンのonclickとか使えそうな関数(enableOne)を適当にでっち上げてみました。
汎用的にしてみようと思ったらちょっと引数が冗長になってしまったのがダメな感じ…、コンテナリストとかCSSクラス名で指定したりとかの方がすっきりするかもだけど、まぁいいや(^^;
<html> <script type="text/javascript" src="http://www.prototypejs.org/assets/2007/6/20/prototype.js"></script> <script type="text/javascript"> function enableOne(target, containers) { target = $(target); containers.each(function(container){ container = $(container); //コンテナ内の入力フィールドのON/OFF Element.getElementsBySelector(container, 'input, select, textarea').each(function(obj){ obj.disabled = (container != target); }); //ついでにtarget以外は消しておく container.style.display = (container == target) ? '' : 'none'; }); } Event.observe(window, 'load', function(){enableOne('q2none', ['q2none','q2a','q2b','q2c'])}, false); </script> <body> Q1.和食派ですか？洋食派ですか？<br/> <input type="radio" name="q1" value="和食派" onclick="enableOne('q2a',['q2none','q2a','q2b','q2c'])"/>和食派<br/> <input type="radio" name="q1" value="洋食派" onclick="enableOne('q2b',['q2none','q2a','q2b','q2c'])"/>洋食派<br/> <input type="radio" name="q1" value="洋食派" onclick="enableOne('q2c',['q2none','q2a','q2b','q2c'])"/>その他<br/> Q2.次の中から好きなものを選んで下さい。<br/> <div id="q2none"> (まずQ1を選択してください。) </div> <div id="q2a"> Q2-洋食派<br/> <input type="radio" name="q2a" value="焼き魚"/>焼き魚<br/> <input type="radio" name="q2a" value="にくじゃが"/>にくじゃが<br/> <input type="radio" name="q2a" value="すき焼き"/>すき焼き<br/> </div> <div id="q2b"> Q2-和食派<br/> <input type="radio" name="q2b" value="焼き魚"/>焼き魚<br/> <input type="radio" name="q2b" value="にくじゃが"/>にくじゃが<br/> <input type="radio" name="q2b" value="すき焼き"/>すき焼き<br/> </div> <div id="q2c"> Q2-その他<br/> じゃ、何が好きなんですか？<br/> <textarea name="q2c"></textarea> </div> </body> </html>
暇つぶしに http://q.hatena.ne.jp/1192158720 の質問に答えようと思ったら人力検索の回答欄にスーパーPRE記法を使うと日本語が文字化けてしまうようなのでこっちに書いてみたネタ。
