- ベストアンサー
ボタンの無効化
Java、JSPを使用しております。 ラジオボタンが複数あり、 どれか一つでもチェックされたらsubmitを無効化させたいと考えています。 ですので、※チェックがされていない状態ではsubmitは表示して欲しい※のです。 どなたかご教授お願いいたします。 サーブレット 中略・・・ if(al1 != null && al1.size() >= 1) { out.println("<script type=\"text/javascript\" src=\"../Script/util.js\" charset=\"UTF-8\"></script>"); out.println("<meta http-equiv=\"Content-Script-Type\" content=\"text/javascript;\">"); out.println("<form action=\"WorkManagement.ProjectManagement\" method=\"post\" name=\"form1\">"); out.println(" <table border=\"1\">"); 中略・・・ for (ProjectManagementBean pm : al1) { out.println(" <tr>"); out.println(" <td>"); out.println(" <input type=\"radio\" name=\"radio\" value=\"" + pm.getProjectID() + "\" onClick=\"rendou(this)\" />"); out.println(" </td>"); 中略・・・ JSP------------------------------------------------------ 中略・・・ <input type="submit" name="register" value="登録" onClick="return proRegister()" /> 中略・・・ .
- a6mi15
- お礼率50% (5/10)
- JavaScript
- 回答数4
- ありがとう数1
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
＞コメント <script> try{ document.addEventListener('click',function(e){func(e)},true); //オブジェクトにクリック時の処理をつける }catch(e){ document.attachEvent('onclick',function(e){func(e)}); //IE用（IEは思想が違うため） } window.onload=function(){ //初期値設定をする。window.onloadで処理するというのは文書が 読み込まれてから処理するということ check(document.getElementById("f")); //form：fにたいしてチェック処理をしている } function func(e){ var t = (e.srcElement || e.target); //イベントハンドラからオブジェクトを確定 if(t.nodeName=="INPUT") check(t.form); //INPUTタグに対して（この場合クリックされたら）checkを発動 } function check(f){ var flg=false; var r=new Object(); for(var i=0;i<f.length;i++){ if(f[i].type=="radio") r[f[i].name]=(r[f[i].name] || f[i].checked); //同じ名前のラジオボタンを探して、チェックがはいっているかどうかしらべる（1つでもチェックが入っていればtrue） } for(var i in r){ if(!r[i]){ flg=true; break; } //ラジオボタンの内容をチェックする、一個でもチェックがないものがあればdisabledのflgをtrueにする } for(var i=0;i<f.length;i++){ if(f[i].type=="submit") f[i].disabled=flg; //サブミットボタンをしらべてdisabledを設定 } return flg; //おまじない、今回はつかっていない } </script>
その他の回答 (3)
- yambejp
- ベストアンサー率51% (3827/7415)
サーブレットの部分は切り分けましょう。 今回の件はユーザーのアクションによる属性の変更ですから あくまでもクライアントサイドのjavascriptです 以下のような感じでわかりますか？ <script> try{ document.addEventListener('click',function(e){func(e)},true); }catch(e){ document.attachEvent('onclick',function(e){func(e)}); } window.onload=function(){ check(document.getElementById("f")); } function func(e){ var t = (e.srcElement || e.target); if(t.nodeName=="INPUT") check(t.form); } function check(f){ var flg=false; var r=new Object(); for(var i=0;i<f.length;i++){ if(f[i].type=="radio") r[f[i].name]=(r[f[i].name] || f[i].checked); } for(var i in r){ if(!r[i]){ flg=true; break; } } for(var i=0;i<f.length;i++){ if(f[i].type=="submit") f[i].disabled=flg; } return flg; } </script> <form id="f"> <input type="radio" name="r1" value="1">r1-1 <input type="radio" name="r1" value="2">r1-2 <input type="radio" name="r1" value="3">r1-3 <input type="radio" name="r2" value="1">r2-1 <input type="radio" name="r2" value="2">r2-2 <input type="radio" name="r2" value="3">r2-3 <input type="submit" value="send1"> <input type="submit" value="send2"> <input type="submit" value="send3"> </form>
補足
yambejp様 ご回答ありがとうございました。 もしお時間がございましたら、コメントといいますか、言葉で説明をいただけるととてもありがたいです。 不明な点がございますので、お聞きしてもよろしいでしょうか？ onClick="～"はいらないのでしょうか？ window.onload=function() これでイベントハンドラのような役割ですか？ 調べてみたのですが、 コードが実行されているときには まだ記述されている部分がロードされていない可能性があり、 その場合エラーとなるため。 と記載してあったので、また別物なのかなと考えたのですが・・・。 ご指導よろしくおねがいします。
- fujillin
- ベストアンサー率61% (1594/2576)
全体像が不明ですが、こんな感じ？ submitボタンはformの一番最後にあるものと仮定。また、name="radio"は該当のラジオボタン以外には使用されていないと仮定しています。 （resetボタンがある場合は、操作時にdesabledをfalseにする必要あり。） <html> <head><title>test</title> <script type="text/javascript"> function rendou(evt, f) { var e = f.elements, t = evt.target || evt.srcElement; if (t.name=='radio') e[e.length-1].disabled = true; } </script> </head> <body> <form action="#" method="post" onclick="rendou(event, this)"> <input type="radio" name="radio" value="a" >a <input type="radio" name="radio" value="b" >b <input type="radio" name="radio" value="c" >c ・・・・・・・・・ <input type="submit" name="register" value="登録"> </form> </body> </html>
補足
fujillin様 説明不足なところが多々ありまして、申し訳ございません。 質問にも記載しておりますが、登録のsubmitはサーブレット上ではなく、※jsp上※に配置しております。 ★JSP★ 名前 : <input type="text" name="name" value="" /> TEL : <input type="text" name="tel" value="" /> <input type="submit" name="register" value="登録" onClick="return proRegister()" /> <input type="submit" name="change" value="変更" onClick="return Change()" /> <input type="submit" name="delete" value="削除" onClick="return Delete()" /> 中略・・・ <h2>◆検索結果◆</h2> <!-- 全件出力 --> <jsp:include page="/servlet/Out.outProject" flush="true" /> ------------------------------------------------------ このOut.outProjectが、質問に記載したサーブレットです。 また、 rendou()は、jsp上に登録submit以外に、変更・削除submitがあるので、その際に予め設定されているIDをgetParameterするために使っております。 ラジオボタンにどれか一つチェックをすると、 そのIDを取得し、登録された名前やTELがテキストボックスに反映されるようになっております。 このような説明で大丈夫でしょうか・・・ 説明が下手ですみません。 何卒よろしくおねがいします。
- yambejp
- ベストアンサー率51% (3827/7415)
submitボタンをdisabledにしたいのか、submitを押した際に バリデートしてエラーチャックをしたいのかによって対応が異なります。
補足
disabledのような機能にしたいと考えています。 ですが、disabledについて調べてみると、 『ラジオボタン等をチェックすると、submitを有効する。』 というものばかりで、私がやりたいことと逆なのです。 私は、『ラジオボタンをチェックすると、submitを無効にしたい。』ですので・・・。
お礼
yambejp様 お礼が遅くなってしまって申し訳ございません。 ありがとうございました。 ぜひ参考にさせていただきたいと思います。