HTMLのボタンを無効化したい

###前提・実現したいこと
現在javascriptを使ってクイズを作成しています。
全ての問題を終了したとき、今まで使用していたボタンを無効化したいのですが、うまくいきません。
HTMLの概念とかも勉強しながらなので、色々と間違っているところもあると思います。
本当はもう少し質問したい部分があるのですが、先にこの問題についてお聞きします。

###発生している問題・エラーメッセージ

うまく動作しない（ボタンが押せる状態になっている）

###該当のソースコード

html
1<body>
2        <h1>問題集10</h1>
3        <p id="que">ここに問題が表示されます</p>
4        <form id="radiobutton">
5          <div>
6              <input id="choice1" type="radio" name="choice" ><span id = "text1">○○○</span><br>
7              <input id="choice2" type="radio" name="choice" ><span id = "text2">××× </span><br>
8              <input type="button" value="回答する" onclick="button_click();">
9              <input type="button" value="終了" onclick="end_study();">
10              <p id="answer"></p>
11              <p id="last"></p>
12          </div>

javascript
1var i = 0;
2var judge ,rand, length;
3
4window.addEventListener("load", function() {
5    show_question(0);
6}, false);
7
8function end_study() {
9    document.getElementById('que').innerHTML = "問題は終了しました!!";
10    document.getElementById('text1').innerHTML  = "終了";
11    document.getElementById('text2').innerHTML  = "終了";
12    document.getElementById('last').innerHTML = "疲れるので休憩を取りましょう!!";
13    document.radiobutton.elements[2].disabled = true;
14    i = null;
15}
16
17function show_question(i) {
18    keyword_replace(i);
19    document.getElementById('que').innerHTML = q[i]; //test_1.jsの配列をそのまま取り込む
20    //問題の配置をランダムにする。
21    rand = Math.floor(Math.random() * 9);
22    judge = rand % 2;
23    //console.log("rand:"+rand);
24    //console.log("judge:"+judge);
25    if (judge == 0) {
26        document.getElementById('text1').innerHTML = exac_a[i]; //同上
27        document.getElementById('text2').innerHTML = miss_a[i]; //同上
28    } else if (judge == 1) {
29        document.getElementById('text1').innerHTML = miss_a[i]; //同上
30        document.getElementById('text2').innerHTML = exac_a[i]; //同上
31        //document.querySelector('label[for="choice1"]').innerHTML="選択肢B";
32    }
33}
34
35function button_click() {
36    document.getElementById('answer').innerHTML = "";
37    //document.forms.(参照するフォームのid).(ラジオボタンに付けたid名).checked
38    var radio1 = document.forms.radiobutton.choice1.checked;
39    var radio2 = document.forms.radiobutton.choice2.checked;
40
41    if ((judge == 0) && ( radio1 )) {
42        document.getElementById('answer').innerHTML = "前問の答え：正解でした";
43        console.log("judge1=0,radio1:on");
44    } else if ((judge == 1) && ( radio1 )) {
45        document.getElementById('answer').innerHTML = "前問の答え：間違いでした";
46        console.log("judge=1,radio1:on");
47    } else if ((judge == 0) && (radio2 ) ) {
48        document.getElementById('answer').innerHTML = "前問の答え：間違いでした";
49        console.log("judge1=0,radio2:on");
50    } else if((judge  == 1) && (radio2 )){
51        document.getElementById('answer').innerHTML = "前問の答え：正解でした";
52        console.log("judge1=1,radio2:on");
53    }else{
54      console.log('default');
55    }
56    i++;
57
58        if  (i == q.length) {
59            setTimeout("end_study()",500);
60        }else{
61            show_question(i);
62        }
63}
64

###試したこと
document.radiobutton.elements[2].disabled = true; を用いて、最終処理の関数は呼ばれていないものの本来はボタンがクリックできないはずなのに、クリックできる。
クリック自体ができるので、iがカウントし続け、配列エラーが出っ放しになる。たぶんほかの言語では重大なエラーになるはずだが、javascript内では警告で収まっているので、何とかしたい。
ボタンを無効化する記述はネット等で調べたが、自分のformと少し書き方が違うらしく、うまく動作していない。
本来の書き方(フォーム内に普通のボタンを含めていいのかどうか）が分からない。form内の部品が配列であるため、[2]を当てている。

kgtkr

2016/09/19 02:52

keyword_replace関数がありません

行動規範の内容に同意します

回答1件

ベストアンサー

`<form id="radiobutton">` ⇒ `<form name="radiobutton">`

追記：

【とほほのJavaScript入門(フォーム関連)】
http://sound.jp/otaq/tohoho/wwwjsfor.htm

[window.]document.form (e3/N2)

個々のフォームオブジェクト。 例えば <FORM NAME=form1> と生成したフォームは、次のいずれかの書式で指定する。(0 はドキュメント中の最初のフォームを表す)
　　document.forms[0]
　　document.forms["form1"]
　　document.form1

【フォーム（Form）】
http://www.tohoho-web.com/js/form.htm

投稿2016/09/19 02:49

編集2016/09/19 11:08

kei344

総合スコア69407

michiaki

2016/09/19 09:29

うまく動きました。しかしなんでidからnameに変えるとうまくいくんですか？ document.radiobutton.elements[2].disabled = true;おけるradiobuttonはnameということなんでしょうか？ radiobuttonの場合はidで取得できているのに、ボタンの場合はnameにしないといけないのでしょうか？

kei344

2016/09/19 11:19

> しかしなんでidからnameに変えるとうまくいくんですか？ document.radiobuttonという書き方はフォームのname属性をもとに取得されるためです。（追記のリンク先参照） > radiobuttonの場合はidで取得できているのに document.forms.radiobutton と書かれている箇所でしょうか。フォームオブジェクトの挙動に詳しくありませんが、「ボタンの場合はname」とかではありません。

michiaki

2016/09/20 08:33

参照見逃してました。すいませんでした。私がラジオボタンを取得したいと質問した時に教えて頂いた回答の中に、document.forms.(参照するフォームのid).(ラジオボタンに付けたid名).checkedというのがあったので、formsでもidで設定する必要があると思い込んでました。多分id属性でも取得できるのかなと思います。ここらへんの自由度の高さ＝複雑さだと個人的には思います。しかし丁寧にご教授頂き誠にありがとうございました。ベストアンサーにさせて頂きます。

行動規範の内容に同意します