【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

回答(4件)

id:Cherenkov No.1

Cherenkov回答回数1502ベストアンサー獲得回数4922009/12/12 03:56:15

ポイント50pt

こんな感じ?

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>
id:mathematician

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

2009/12/12 14:42:54
id:kn1967 No.2

kn1967回答回数2915ベストアンサー獲得回数3012009/12/12 03:58:42

ポイント50pt

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

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


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

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

id:mathematician

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

2009/12/12 14:44:45
id:kmdsbng No.3

kmdsbng回答回数5ベストアンサー獲得回数22009/12/12 13:22:00

ポイント50pt

サンプルを作りました。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

以上ご参考まで。

id:mathematician

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

2009/12/12 14:46:38
id:van-dine No.4

van-dine回答回数108ベストアンサー獲得回数112009/12/12 14:39:32

ポイント50pt

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

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

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

2009/12/12 14:47:26
  • id:kn1967
    ごめんなさい。一部訂正。

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

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

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

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

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

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません