- ベストアンサー
ラジオボタンの切り替えについて
- ラジオボタンの値に応じてボタンの有効・無効を切り替える方法について教えてください。
- ラジオボタンの選択値によって、関連するボタンの有効状態を制御する方法を教えてください。
- ラジオボタンの選択に応じて、対応するボタンを有効化・無効化する方法を教えてください。
- siglam
- お礼率100% (2/2)
- JavaScript
- 回答数2
- ありがとう数3
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
こんにちは。 こんな感じでどうでしょうか。 もうちょっと工夫すれば汎用性を持たせることが出来ますがこんな方法がありますということで。 他にもいろいろ書き方がありますのでその辺は応用利かせてみてください。 動きの説明 1.HTMLの属性で全てボタンをdisable 2.ラジオがクリックされた際にsetButtonへdisableを解除するボタンの名称を渡す 3.一度全てのボタンをdisableする(リセットの意) 4.2で渡されたボタンのみdisableをfalse(その前の条件はetButtonに値が来なかったとき=全てダメ) <html> <head> <title>TEST</title> <script type="text/javascript"> <!-- function setButton ( value ) { frmTest['btnA'].disabled = true; frmTest['btnB'].disabled = true; frmTest['btnC'].disabled = true; if ( value != undefined ) frmTest[value].disabled = false; } //--> </script> </head> <body> <form name="frmTest"> <input type="radio" name="radio1" value="a" onclick="setButton('btnA');">A <input type="radio" name="radio1" value="b" onclick="setButton('btnB');">B <input type="radio" name="radio1" value="c" onclick="setButton('btnC');">C <input type="radio" name="radio1" value="x" onclick="setButton();">全部ダメ <br><br> <input type="button" value="Aボタン" name="btnA" disabled> <input type="button" value="Bボタン" name="btnB" disabled> <input type="button" value="Cボタン" name="btnC" disabled> </form> </body> </html>
その他の回答 (1)
- duron
- ベストアンサー率77% (73/94)
作ってたらすでに回答が出てましたね・・・でもせっかくなので。 <html> <head> <title>サンプル</title> <script type="text/javascript"> <!-- function selectradio() { var els=document.forms["selectform"].elements; var str=""; for(i=0;i<els.length;i++) { if(!(els[i].type)) continue; if(els[i].type.toLowerCase() !='radio') continue; if(!(els[i].checked)) continue; var bt_a_flg=true; var bt_b_flg=true; var bt_c_flg=true; if(els[i].value=="a")bt_a_flg=false; if(els[i].value=="b")bt_b_flg=false; if(els[i].value=="c")bt_c_flg=false; document.getElementById("bt_a").disabled=bt_a_flg; document.getElementById("bt_b").disabled=bt_b_flg; document.getElementById("bt_c").disabled=bt_c_flg; break; } } --> </script> </head> <body onload="selectradio();"> <form name="selectform"> <input type="radio" name="radio1" value="a" onclick="selectradio();" onfocus="selectradio();">A <input type="radio" name="radio1" value="b" onclick="selectradio();" onfocus="selectradio();">B <input type="radio" name="radio1" value="c" onclick="selectradio();" onfocus="selectradio();">C <input type="radio" name="radio1" value="x" onclick="selectradio();" onfocus="selectradio();">全部ダメ <br><br> <input type="button" id="bt_a" value="Aボタン"> <input type="button" id="bt_b" value="Bボタン"> <input type="button" id="bt_c" value="Cボタン"> </form> </body> </html>
お礼
ご回答いただきまして、ありがとうございます。 思い通りに動作させることができ、大変参考になりました。
お礼
早速のご回答ありがとうございます。 思い通りに動作させることができました。 いろいろ応用できるように勉強いたします！