- ベストアンサー
チェックによる複数ボタンの有効化
- 同意するのチェックボックスにチェックを入れないと「次へ進む」のボタンが有効にならないスプリクトがあります。複数のチェックボックスと複数のボタンを同時に行う方法を教えてください。
- 例えば、A、B、C、D、Eの5つのチェックボックスがあり、ボタン1は常に有効です。ボタン2はBのチェックボックスにチェックが入ると有効になり、クリックすると1537.htmlにリンクします。ボタン3はDのチェックボックスにチェックが入ると有効になり、クリックすると2468.htmlにリンクします。
- 初心者の方には、<head>タグ内に必要なスクリプトを追加し、<body>タグ内に必要なHTMLコードを記述する方法をお伝えします。
- tado
- お礼率91% (105/115)
- JavaScript
- 回答数2
- ありがとう数4
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
もちろん可能です。 下のサンプルコードは、 ■チェックボックスの状態に応じてボタンの状態を変更する という処理を「ユーザーがチェックボックスをクリックしたとき」に実行しています。 これを、「ユーザーがボタンをクリックしたとき」に実行するように変更するだけです。 タグの中に書いてある onclick="ButtonsEnable()" という記述がそれを指示しています。現在はすべてのチェックボックスに書いてあるので、すべてのチェックボックスがクリックされるたびに上記の処理が実行されます。 新たにボタンを追加し、そのタグに onclick="ButtonsEnable()" を移動、つまりチェックボックスの方からは削除し、ボタンに付ければ、「ユーザーがボタンをクリックしたとき」に実行されます。 ボタンの状態を変更する条件処理については、コードを見れば解るかと思います。 --------------------------------- ついでに、役立つかわかりませんが他のアドバイスを。 ●クイズとのことですが、形式は「３択１正解」のような、ようするに１つの問題に正解は１つだけですか？それとも複数ですか？ もし1つだけの場合、チェックボックスでは複数選択可能なので、極端な話、全部のチェックをオンにしておけば必ず正解と言うことになってしまいます。 「どれか１つしか選べない」ようにするにはラジオボタンを使います。ラジオボタンは、選択肢から複数選択ができない、必ず1つだけ、というものです。 ●1ページに複数の問題が並ぶ場合、サンプルコードのような作りでは、問題ごとに同じような仕組みを用意する必要があります。そういう場合は配列を使って処理するとスマートにできると思います。 ●これは蛇足ですが、ページのソースを見れば誰にでも正解がバレてしまうので、将来的に CGI などを使ったものにできればいいですね。
その他の回答 (1)
- taseki
- ベストアンサー率66% (155/233)
やりかたはいろいろあると思いますが、サンプルコードです。 そのフォームがどういうものかによって、たとえば submit するなら name 属性への配慮など必要です。 またサンプルコードは汎用性を考えて、全てのチェックボックスの変化に対して一括してボタンを操作する形になっています。 ------------------------ <html> <head> <script type="text/javascript"> <!-- function ButtonsEnable() { form1.btn2.disabled = !form1.chkB.checked form1.btn3.disabled = !form1.chkD.checked } --> </script> </head> <body onload="ButtonsEnable()"> <form id="form1"> チェックA<input type="checkbox" id="chkA" onclick="ButtonsEnable()"><br> チェックB<input type="checkbox" id="chkB" onclick="ButtonsEnable()"><br> チェックC<input type="checkbox" id="chkC" onclick="ButtonsEnable()"><br> チェックD<input type="checkbox" id="chkD" onclick="ButtonsEnable()"><br> チェックE<input type="checkbox" id="chkE" onclick="ButtonsEnable()"><br> <input type="button" value="ボタン1" id="btn1"><br> <input type="button" value="ボタン2" id="btn2" onclick="location.href='1537.html'"><br> <input type="button" value="ボタン3" id="btn3" onclick="location.href='2468.html'"> </form> </body> </html>
お礼
どうも有難うございました。早速作成しましたところ巧くいきました。 お願いですが、少し欲が出てきましてもう少し高度に 例えば、最初の質問内容に「ボタンＷ」を追加し この「ボタンＷ」が押されたときに Bがチェックしてある場合に、「ボタン2」が有効になるようには可能でしょうか？ どの様な使い道かと言いますと 1・Webで3問ほどクイズを出題 2・回答はチェック形式で選択枝から選ぶ 3・採点ボタンを押す 4・得点表示 ・正解の場合その質問の解説のボタン有効化 と言う様に作成したいと思っています。 現在は、正解をチェクすると採点を待たずにボタンが有効化しています。 （tasekiさんのご教示でここまで出来ました）
お礼
有難うございました。 お蔭様で５問の問題を作成する事が出来ました。 方もほほぼ満足しています。 >配列を使って処理するとスマート・・・ 次回の勉強課題にします。 >ページのソースを見れば誰にでも正解がバレ・・・ お遊びのページなのでこれで良しとします。 （右クリック禁止くらいは入れた方がいいでしょうか？）