人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

【javascriptでラジオボタンを無効化する方法】2つの質問に回答してもらうアンケートがあります。選択肢が4つあって、第1問で「もっとも好きなもの」、第2問で「もっとも嫌いなもの」をラジオボタンで一つずつ選択してもらうのですが、第1問と第2問で同じ選択肢を選択できてしまうと矛盾が生じます。そこで、第1問でラジオボタンどれか一つを選択すると、第2問でその選択肢だけ無効化するjavascriptを設置しようと考えました。第1問と第2問のnameは当然変えますが、選択肢4つのvalueは第1問と第2問で共通のものを使いたいと思います。また、第2問の方を先に選択してしまった場合、同様に第1問の同じ選択肢が無効化するようにしたいのです。ラジオボタン無効化のサンプルコードを参考に作ろうとしたのですが、うまくいきません。どのように書けばいいか、ご教示いただければ助かります。


●質問者: mathematician
●カテゴリ:コンピュータ ウェブ制作
✍キーワード:JavaScript name アンケート コード ラジオボタン
○ 状態 :終了
└ 回答数 : 4/4件

▽最新の回答へ

1 ● Cherenkov
●50ポイント

こんな感じ?

HTML SandBox ここに貼付けて実行。

Firefox3.5、IE8で動作確認。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Google Calendar Demo</title>
<script type="text/javascript">
function checkItem(elem){
 var item = (elem.name == "q1") ? document.getElementsByName("q2") : document.getElementsByName("q1");
 for(var i=0; i<item.length; i++){
 if(item[i].value == elem.value){
 item[i].setAttribute("disabled", true);
 }else{
 item[i].removeAttribute("disabled");
 }
 }
}
</script>
</head>
<body>

<form method="post" action="example.cgi">

<p>もっとも好きなもの<br>
<input type="radio" name="q1" onclick="checkItem(this)" value="いちご"> いちご
<input type="radio" name="q1" onclick="checkItem(this)" value="みかん"> みかん
<input type="radio" name="q1" onclick="checkItem(this)" value="りんご"> りんご
<input type="radio" name="q1" onclick="checkItem(this)" value="かき"> かき
</p>

<p>もっとも嫌いなもの<br>
<input type="radio" name="q2" onclick="checkItem(this)" value="いちご"> いちご
<input type="radio" name="q2" onclick="checkItem(this)" value="みかん"> みかん
<input type="radio" name="q2" onclick="checkItem(this)" value="りんご"> りんご
<input type="radio" name="q2" onclick="checkItem(this)" value="かき"> かき
</p>

<p><input type="submit" value="送信する"></p>
</form>

</body>
</html>
◎質問者からの返答

ありがとうございます。まさにイメージ通りです。


2 ● kn1967
●50ポイント

どこのサンプルコードを参考にしたのかを書いてくれると、

ピンポイントで回答が来る可能性もあるのだが・・・、


とりあえず作ってみたので、よろしければどうぞ。

<html>
<head>
 <script type="text/javascript">
 <!--
 var check_array = new Array(2);
 check_array[0] = check_array[1] = 0;
 var check = 0;
 function radio_check(obj){
 if (obj.name == "a") {
 var obj1 = document.f1.a;
 var obj2 = document.f1.b;
 check = 0;
 } else {
 var obj1 = document.f1.b;
 var obj2 = document.f1.a;
 check = 1;
 }
 for (var i = 0; i < obj1.length; i++) {
 if(obj1[i].checked == true) {
 if (i != check_array[check]) {
 obj2[check_array[check]].disabled = false;
 obj2[i].checked = false;
 obj2[i].disabled = true;
 check_array[check] = i;
 }
 break;
 }
 }
 }
 //-->
 </script>
</head>
<body>
 <form name="f1">
 もっとも好きなもの
 <input type="radio" name="a" value="1" onclick="javascript:radio_check(this);"/>りんご
 <input type="radio" name="a" value="2" onclick="javascript:radio_check(this);" />みかん
 <input type="radio" name="a" value="3" onclick="javascript:radio_check(this);" />バナナ
 <input type="radio" name="a" value="4" onclick="javascript:radio_check(this);" />なし
 <br />
 もっとも嫌いなもの
 <input type="radio" name="b" value="1" onclick="javascript:radio_check(this);" />りんご
 <input type="radio" name="b" value="2" onclick="javascript:radio_check(this);" />みかん
 <input type="radio" name="b" value="3" onclick="javascript:radio_check(this);" />バナナ
 <input type="radio" name="b" value="4" onclick="javascript:radio_check(this);" />なし
 </form>
</body>
</html>

◎質問者からの返答

ありがとうございました。動作確認できました。イメージ通りのものです。


3 ● kmdsbng
●50ポイント

サンプルを作りました。

http://kmdsbng.railsplayground.net/temp/radio_sample.html

IEとfirefoxで動作を確認してます。

どこでつまづいているのかわからないのでアドバイスが難しいのですが、

私がこういう系のプログラム(javascriptでフォームのON/OFF切り替え)を

書くときに守っているのは、どのイベントから呼ばれたときも、できるだけ

共通のロジックで処理できるように書く、ということです。

今回のサンプルで言いますと、ブラウザ初期化時、すべてのラジオボタンが押された時の

処理に、共通してexcludeRadio()を呼び出すようにしています。さらにexludeRadio()の

中で、thisの値を参照しません。

こうすることで、呼び出し元による処理分岐をなくしてロジックを記述する

ことができ、プログラムがシンプルに、保守が簡単になります。

この方法のデメリットは、ボタンが押される度にすべてのボタンに

対して操作(setAttribute()など)がかかってしまうため、要素数が

多くなってくると処理速度に問題が出てくることです。ただし、一般の

フォームを作るときには問題となることはまずありません。

過去に200個以上の要素を対象にしたときにレスポンスが悪化した

ため、チューニングを行ったことはありますが、10個、20個程度の

要素が対象なら、ユーザが気づくことはない程度の処理時間です。

以上ご参考まで。

◎質問者からの返答

詳しい解説もつけていただき、ありがとうございました。とても勉強になりました。


4 ● van-dine
●50ポイント

例として、こんなのでどうでしょうか?

function q2_a1_cilck()
{
 for(var i = 0; i < FORM.length; i++) //FORM -> フォーム名
 {
 FORM[i].disabled = ((FORM[i].name == "q1") && (FORM[i]value == "a1"));
 }
}
◎質問者からの返答

ご回答ありがとうございました。

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ