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

Question

mathematician

119

118もっと見る

200pt

コンピュータウェブ制作

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

回答の条件

1人2回まで

登録：2009/12/12 02:43:59
終了：2009/12/12 14:48:02

※ 有料アンケート・ポイント付き質問機能は2023年2月28日に終了しました。

kn1967 2009/12/12 17:12:26

ごめんなさい。一部訂正。

check_array[0] = check_array[1] = 0;
　　　↓
check_array[0] = check_array[1] = -1;

obj2[check_array[check]].disabled = false;
　　　↓
if (check_array[check] >= 0) {
obj2[check_array[check]].disabled = false;
}

初期値がゼロ（回答の例であれば「りんご」）になっているため、
ページを開いた直後に「りんご」を選択した時に限り、
正常動作しませんので、上記のとおり訂正願います。

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

リクエスト送信済

回答リクエストを送信したユーザーはいません

Cherenkov · Answer 1 · 2009-12-12T03:56:15+09:00

こんな感じ？

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>

kn1967 · Answer 2 · 2009-12-12T03:58:42+09:00

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

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

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

<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>

kmdsbng · Answer 3 · 2009-12-12T13:22:00+09:00

サンプルを作りました。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

以上ご参考まで。

van-dine · Answer 4 · 2009-12-12T14:39:32+09:00

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

function q2_a1_cilck()
{
  for(var i = 0; i < FORM.length; i++) //FORM -> フォーム名
  {
    FORM[i].disabled = ((FORM[i].name == "q1") && (FORM[i]value == "a1"));
  }
}

回答（4件）

Cherenkov15044932009/12/12 03:56:15

kn196729153012009/12/12 03:58:42

kmdsbng522009/12/12 13:22:00

van-dine108112009/12/12 14:39:32

コメント（1件)

この質問への反応（ブックマークコメント）