• 締切済み

Firefoxのdisabledプロパティのバグ?

複数のラジオボックスがあり、すべてのラジオボタンで 「YES」がチェックされた時にだけ、submitボタンが 有効になるようJavaScriptで制御できればと思ってます。 素人ながら以下のようなJavascriptにしたところ、 IEやSafari、Chromeでは意図した通り動作しましたが、 ただFirefoxのみボタンがdisabledになったまま有効になりませんでした。 解決策がわかる方がいらっしゃればご教授お願いできればと思います。 よろしくお願い致します。 <script type="text/javascript"> <!-- function check() { if (form1.radio1[0].checked && form1.radio2[0].checked && form1.radio3[0].checked) { form1.send.disabled = false; } else { form1.send.disabled = true; } } ; //--> </script> <form name="form1"> <input type="radio" name="radio1" value="1" >YES <input type="radio" name="radio1" value="2">NO <input type="radio" name="radio2" value="1">YES <input type="radio" name="radio2" value="2">NO <input type="radio" name="radio3" value="1" onClick="check()">YES <input type="radio" name="radio3" value="2">NO <input type="button" name="send" value="GO" onclick="location.href='hogehoge.html'" disabled="disabled"> </form>

みんなの回答

  • fujillin
  • ベストアンサー率61% (1594/2576)
回答No.2

直接の回答ではありませんが… ご提示のものだと、radio3のYESをクリックしたタイミングでしかチェックが走らないので、 ・先にradio3をYESにした後で全部YESにしても、ボタンが有効にならない。 ・一度YESをそろえてボタンが有効になると、NOに設定し直してもボタンは押せる。 という状態になっていますけれど、それは意図の通りなのでしょうか? あと、HTMLソースでサブミット機能を初期状態に不可に設定してしまうと、スクリプトオフの環境では決してボタンが押せないことになってしまいます… 一般的にはこんなふうになるのではないだろうか。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="ja"> <head><title>sample</title> <meta http-equiv="Content-Script-Type" content="text/javascript"> </head> <body> <form name="form1" action="hogehoge.html" onclick="check(event, this);"> <p> <input type="radio" name="radio1" value="1" >YES <input type="radio" name="radio1" value="2">NO <input type="radio" name="radio2" value="1">YES <input type="radio" name="radio2" value="2">NO <input type="radio" name="radio3" value="1">YES <input type="radio" name="radio3" value="2">NO <input type="submit" name="send" value="GO"> </p> </form> <script type="text/javascript"> <!-- function check(evt, f){ var elm = f.elements, flag = true; for(var i=1; i<4; i++) flag = flag && elm["radio"+i][0].checked; elm["send"].disabled = !flag; } document.forms["form1"].elements["send"].disabled = true; //--> </script> </body> </html> 原因やcheckboxの数に関してはNp1様のご指摘の通りかと。

回答No.1

しょうりゃくしたかたちだからです。 そもそも、checkbox が、3こでよいのでは? <!DOCTYPE html> <html lang="ja"> <head>  <title></title>  <meta charset="utf-8"> </head> <body> <form name="form1"> <input type="radio" name="radio1" value="1" >YES <input type="radio" name="radio1" value="2">NO <input type="radio" name="radio2" value="1">YES <input type="radio" name="radio2" value="2">NO <input type="radio" name="radio3" value="1" onClick="check()">YES <input type="radio" name="radio3" value="2">NO <input type="button" name="send" value="GO" onclick="location.href='hogehoge.html'" disabled="disabled"> </form> <script> function check() { var es = document.forms['form1'].elements; es['send'].disabled = ! (es['radio1'][0].checked && es['radio2'][0].checked && es['radio3'][0].checked) } </script>

関連するQ&A

  • ボタンを動的にdisabledさせたいのですが

    お世話になります。 ある画面に複数ボタンがあって 押されたボタンをdisabledにしたいなと思っています。 ただしどのボタンがおされても同じ関数に飛んでほしいのですが いまいち解決できません。 <form name="form"> <input type="button" name="syori1" value="ボタン1" onClick="javascript:hogehoge()"> <input type="button" name="syori2" value="ボタン2" onClick="javascript:hogehoge()"> <input type="button" name="syori3" value="ボタン3" onClick="javascript:hogehoge()"> </form > とあった場合 function hogehoge(){ document.form.ボタンの名前.disabled=true; } としたいのですが 名前の部分は動的に変えることは可能なのでしょうか? 普通に document.form.syori1.disabled=true; と書けば簡単なのですが、ボタンの数が決まっていないためボタン名を指定して書くことはできません。 ボタン名は onClick="javascript:hogehoge(document.form.ボタンの名前.name)" で、送ることができるのは確認したのですが hogehoge(ボタンの名前) の方でどうやってdisabledのところに入れればいいか解りません。 よろしくお願い致します。

  • 複数のラジオボタン選択肢によりsubmitを押せなくする

    初めて質問させていただきます。 ラジオボタンが下記の選択状態の時だけ「送信(submit)」ボタンを enable で表示させたいです。 1:● 2:○ 1:● 2:○ それ以外の選択肢では「送信(submit)」ボタンを disabl で押せないようにしたいです。 調べて、近い動作にはなりましたが、javascriptに関して 殆ど知識がないため、これから先がさっぱりわかりません。 ぜひ教えを乞いたく参りました。お知恵をお貸しください<(__)> どうぞ宜しくお願い致します。 <HTML> <HEAD> <script type="text/javascript"><!-- function unlock1(el){el.form.send.disabled=false;} function unlock2(el){el.form.send.disabled=true;} //--> </script> <form> 1:<input type="radio" name="radio1" value="1" onClick="unlock1(this)"> 2:<input type="radio" name="radio1" value="2" onClick="unlock2(this)"><br> 1:<input type="radio" name="radio2" value="1" onClick="unlock1(this)"><br> 2:<input type="radio" name="radio2" value="2" onClick="unlock2(this)"><br> <input name="send" type="submit" value="送信" disabled > </form> </BODY> </HTML>

  • チェックボックスのON/OFFに連動してラジオボタンのdisabledを解除

    下記の動作をする checkfunc(); の書き方をご教示ください. <html> <head> <script type="text/javascript"> checkfunc() </script> </head> <body> <form name="myform"> <input type="checkbox" name="yesno" value="1">チェックボックス <input type="radio" name="rdo1" value="0">ラジオボタン0 <input type="radio" name="rdo1" value="1">ラジオボタン1 <input type="radio" name="rdo1" value="2">ラジオボタン2 <input type="radio" name="rdo1" value="3">ラジオボタン3 <input type="radio" name="rdo1" value="4">ラジオボタン4 </form> </body> </html> (1) このHTMLのラジオボタン5つは,最初は全てdisabledです. (2) チェックボックスがされたらラジオボタングループが有効になるようにしたいです. (3) 逆に,チェックが外れたらラジオボタンはdisabledに戻ります. (4) このjavascriptは,PHPファイルに組み込みますが.表示時にDBを読み込んでどれに  チェック/選択されていたかによって,checkboxやradioに「checked」を追記します.  その場合,enabled/disablesの関係に矛盾がないようにもしたいですが,  <body>に onload="checkfunc();" と入れればいいでしょうか? なお,IE以外のブラウザでも動作できると大変助かります.よろしくお願い致します.

  • JavaScriptのdisabledがうまく動かない

    以下のソースで、JSの箇所(disabled)だけですと動くのですが、送信フォームを追加すると、エラーになってしまいます。 <HTML> <HEAD> <TITLE></TITLE> <script language=javascript1.2> <!-- function textboxdisable(state){ var len = document.forms["form1"].f_level2.length; for(var i=0;i<len;i++) {document.forms["form1"].f_level2[i].disabled=!state;} } //--> </script> <input type="submit" value="送信"> <FORM action="test.html" method="POST" target="_blank"> <form name=form1> <tr><td align="right"> <input type="checkbox" name="f_level" value="f_level" onclick="textboxdisable(this.checked)">登録レベル</td> <td><input type="radio" name="f_level2" value="main" disabled>主メール <input type="radio" name="f_level2" value="sub" disabled>サブメール</td></tr> </form> </BODY> </HTML> どこが悪いのか、もうかれこれ半日考えています・・ 分かる方いらっしゃいましたら、教えていただけますでしょうか。

  • disabledの点で。

    このソースを開いて、更新ボタンをクリックすると、 2の方のテキストボックスが半透明になりますが、それは半透明にしないようにすることは可能なのでしょうか。 お願いします。 <html> <head> <title></title> <script language="JavaScript"> <!-- function setTF(){ if(document.form1.text1.value=="") document.form1.text2.disabled = true; else document.form1.text2.disabled = false; } //--> </script> </head> <body> <form name="form1"> 1<INPUT type="text" name="text1" onChange="setTF()"> 2<INPUT type="text" name="text2" disabled> <INPUT type="submit" value="登録" onClick="return setTF()" name="submit"> </form> </body> </html>

  • 特定のラジオボタンが選択されたらテキストフィールドを入力可

    下のような6つのラジオボタンと1つのテキストフィールドのあるフォームがあります。 「あ・い・う・え・お」のラジオボタンが選択されたらテキストフィールドをdisabledに、「か」なら入力可能にしたくて、JavaScriptで次のように記述しました。 一応動作しているように見えるのですが、見よう見まねで書いた初めてJavaScriptなので大丈夫なのか不安です。これで良いのでしょうか。 function txtClose () { if (document.f_frm.motive[5].checked) { document.f_frm.motive_add.disabled = false; } else { document.f_frm.motive_add.disabled = true; } } <form name="f_frm"> <input type="radio" name="motive" value="あ" onclick="txtClose();" />あ<br /> <input type="radio" name="motive" value="い" onclick="txtClose();" />い<br /> <input type="radio" name="motive" value="う" onclick="txtClose();" />う<br /> <input type="radio" name="motive" value="え" onclick="txtClose();" />え<br /> <input type="radio" name="motive" value="お" onclick="txtClose();" />お<br /> <input type="radio" name="motive" value="か" onclick="txtClose();" />か<br /> <input type="text" name="motive_add" size="20" maxlength="40" onclick="txtClose();" /> </form>

  • ラジオボタンの選択項目によってコメントを表示する方法

    ラジオボタンの「Yes・No」にチェックすると、チェックした項目別に欄外にコメントを表示するページを作成しました。 初心者のため、Q1~Q15までcheckの方法を延々と書いたのですが、もっと簡単に書く方法はありますでしょうか? 参考にQ1・Q2の分を掲載させていただきます。 ぜひ、教えてください。よろしくお願いいたします。 <SCRIPT language="JavaScript"> <!-- function check(){ if (document.form1.q1[0].checked){ document.form1.q1com.value="減量しましょう"; } if (document.form1.q1[1].checked){ document.form1.q1com.value="引き続き注意を"; } if (document.form1.q2[0].checked){ document.form1.q2com.value="再検査を受けましょう!"; } if (document.form1.q2[1].checked){ document.form1.q2com.value="チェックしましょう"; } // --> </SCRIPT> <INPUT type="radio" name="q1"> Yes <INPUT type="radio" name="q1"> No <INPUT size="41" type="text" name="q1com"> <INPUT type="radio" name="q2"> Yes <INPUT type="radio" name="q2"> No <INPUT size="44" type="text" name="q2com"> <INPUT type="button" value=" 診断ボタン " onclick="check();>

  • INPUT TYPE=""submit"" の disabled をJavascriptで操作したい

    ご教授、お願いします。 <!-- function Kyoka(){ if(document.form02.ch_on.checked) { alert (""); document.form02.ilai2.disabled = false; } else { document.form02.ilai2.disabled = true } { // --> とスクリプトを記述し <TD><INPUT TYPE="checkbox" NAME="ch_on" VALUE="" onclick="Kyoka()"></TD>" <TD><FONT COLOR=green><INPUT TYPE="submit" name="irai2" VALUE="依頼" onClick="javascript:location.reload()"></TD>" と、body内に記述しています。 このとき、チェックボックスにチェックを入れると、アラートは表示されますが、その後でエラー(IEの右下のバーに「!」が表示)になります。 数時間悩みましたが、わかりません。 どなたかご教授頂けませんでしょうか? よろしくお願いします。 また、submitボタンのon/offをjavascriptを使わずに行う方法が、あるのでしょうか? もしあれば教えて頂ければ、幸いです。

  • ラジオボタンでdisabledとchecked

    お世話になります。 ラジオボタンが3つ有り、それぞれチェックする種類によって 表示内容を変更している処理があります。 今回、そこをカスタマイズすることになり、表示するのは1種類になりました。 環境ファイルの設定で、1種類か3種類かの表示を 変更できるようにしなければなりませんが。 つまり、ラジオボタンが不要になったのですが、 そのラジオボタンを参照している箇所が数箇所あるので それらを削除するのでなく、レイアウトも崩れてしまうので ラジオボタンはそのままで、表示する種類のラジオボタンを checked し、 全部のボタンを disabled しました。 (ラジオボタン横の文字はフォントの色をグレーにしました) 問題なく、動いているのですが このような使い方はOKでしょうか?  こんな感じにしました    ↓ <input type="radio" name="who" value="0" checked disabled><font class="gray">全員</font> <input type="radio" name="who" value="1" disabled><font class="gray">男性</font> <input type="radio" name="who" value="2" disabled><font class="gray">女性</font>  <input type="button" value="表示" name="hyouji" id="hyouji"> よろしくお願いします。

  • セレクトボックスを無効に出来なくて困っています

    このサイトで拝見したソースを参考に、ラジオボタンで選択した項目以外のテキストボックスなどが無効になる仕組みの、以下のようなフォームを作りました。 <form method="POST" name="form01"> <script language="javascript" type="text/javascript"> <!-- function swDis() { fObj = document.form01; fObj.sentaku01.disabled = (fObj.namae[0].checked) ? false : true ; fObj.sentaku02.disabled = (fObj.namae[1].checked) ? false : true ; fObj.sentaku03.disabled = (fObj.namae[2].checked) ? false : true ; } //--> </script> <p> <input type=radio name="namae" value="AAA" onclick="swDis()" checked /> sentaku01 <select name="sentaku01" id="sentaku01"> <option>選択肢1</option> <option>選択肢2</option> <option>選択肢3</option> </select> <br /> <input type=radio name="namae" value="BBB" onclick="swDis()" /> sentaku01 <input type=text name="sentaku02" disabled /> <br /> <input type=radio name="namae" value="CCC" onclick="swDis()" /> sentaku01 <input type=text name="sentaku03" disabled /> <br /> <input type=radio name="namae" value="sentaku04" onclick="swDis()" /> sentaku04<br /> <input name="" type="submit" value="送信する" /> </p> </form> しかし、この方法ですと、最初にフォームが表示された段階ではセレクトボックスが生きてしまい、他のいずれかのラジオボタンをクリックしないとセレクトボックスがグレーアウトしてくれません。 フォームが表示された時点ですぐにセレクトボックスをグレーアウトさせる方法はないでしょうか? 対策をご存じの方がいらっしゃいましたらどうかよろしくお願い致します。

専門家に質問してみよう