JAVASCRIPTでチェックボタンがチェックされなかったら、無効になる処理を教えてください。

前へ 次へ
このQ&Aのポイント
  • <script>タグ内のJavaScriptで、チェックボタンがチェックされていない場合に無効になる処理を実装する方法を教えてください。
  • JavaScriptでチェックボタンがチェックされていない場合の処理を教えてください。
  • JAVASCRIPTを使用して、チェックボタンがチェックされていない場合に無効になる処理を教えてください。
回答を見る
  • ベストアンサー

JAVASCRIPT

JAVASCRIPTでチェックボタンがチェックされなかったら、無効になる処理を教えてください。 <script> function butotnClick(){ if(check1.checked || check2.checked || check3.checked || check4.checked || check5.checked || check6.checked || check7.checked){ }else{ alert('曜日をチェックしてください'); document.f1.submit(); } } </script> <input type="button" value="設定" onclick="butotnClick()" />

質問者が選んだベストアンサー

  • ベストアンサー
回答No.1

>JAVASCRIPTでチェックボタンがチェックされなかったら、無効になる処理を教えてください。 今、質問者さんが書いているソースがそれなのでは？ 何を無効にしたいのかわかりませんが、 思うに document.f1.submit(); これじゃないのですかね。。 試しにこれをコメントアウトしてみて、思ってる動作？かを確認を！ 通称これをバリデーションって言う処理になるので、 チェックルーチン→チェック後の処理と 分けておく方が、長い意味で幸せですよ。 多くの場合、どこがだめでも結果は「だめ」ですから。 その都度１つごとにだめ～って書いてたら、 わけわからなくなる確率の方が上がるだけです。

akio123
質問者

お礼

ありがとうございます^_^

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • 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を使わずに行う方法が、あるのでしょうか？　もしあれば教えて頂ければ、幸いです。

  • Javascriptを短くしたい

    初歩的なことですみません。 Javascriptで表示／非表示を切り替えるものを作ろうと思うのですが、 以下のサンプル文のような形では、項目数が増えるとその分だけ どんどんJavascriptも長くなっていってしまいます。 Javascript文を簡潔にするには、どのように記述すればよいのでしょうか。 よろしくお願いします。 <script type="text/javascript"> <!-- function Hyo1(num) { if (num == 0) { document.getElementById("cont1").style.display="block"; } else { document.getElementById("cont1").style.display="none"; } } function Hyo2(num) { if (num == 0) { document.getElementById("cont2").style.display="block"; } else { document.getElementById("cont2").style.display="none"; } } // --> </script> <div id="cont1">ああああああ</div> <form> <input type="button" value="表示" onclick="Hyo1(0)"> <input type="button" value="非表示" onclick="Hyo1(1)"> </form> <form> <div id="cont2">いいいいいい</div> <input type="button" value="表示" onclick="Hyo2(0)"> <input type="button" value="非表示" onclick="Hyo2(1)"> </form>

  • 2つのjavascriptを組み合わせたい

    フォームメール用の2つのjavascriptがあります。 ●2重送信防止とデータ送信後指定ページへ遷移するjavascript ●テキストボックスが空欄だった時にアラートを表示するjavascript の2つです。 この2つを組み合わせようとしたのですが、うまく動きません。 ご指導いただきたくお願いいたします。 *************************************************** 【●2重送信防止とデータ送信後指定ページへ遷移するjavascript】【動きます】 送信ボタン押下後、2重送信を防止しながら、データ送信後は「location.href = "finish.html"」でfinish.htmlを表示します。 <script type="text/javascript" src="js/jquery.js"></script> <script> jQuery(function($) { $('#form1').submit(function(event) { // HTML送信キャンセル event.preventDefault(); //フォーム要素取得 var $form = $(this); // 送信ボタンを取得 // （後で使う: 二重送信防止） var $button = $form.find('button'); // 送信 $.ajax({ url: $form.attr('action'), type: $form.attr('method'), data: $form.serialize() + '&delay=1', timeout: 10000, // 送信前 beforeSend: function(xhr, settings) { // ボタン無効二重送信防止 $button.attr('disabled', true); }, // 応答後 complete: function(xhr, textStatus) { // ボタン有効再送信許可 $button.attr('disabled', false); }, // 通信成功処理 success: function(result, textStatus, xhr) { // 入力値初期化 $form[0].reset(); location.href = "finish.html"; }, // 通信失敗処理 error: function(xhr, textStatus, error) { alert('retry');} }); }); }); </script> <form name="form1" id="form1" method="POST" name="form1" action="insert.php"> <input type="text" name="tel" value="" /> <input type="text" name="fax" value="" /> <input type="submit" value="送信A"> </form> *************************************************** 【●テキストボックスが空欄だった時にアラートを表示するjavascript】【動きます】 テキストボックスが空欄だったらアラートを表示します。 <script> function check3() { 　　var tel3 = document.form1.tel.value; 　　var fax3 = document.form1.fax.value; 　　var isValid = true; 　　if (!tel3) { 　　　　alert("電話未入力"); 　　　　isValid = false; 　　} 　　if (!fax3) { 　　　　alert("FAX未入力"); 　　　　isValid = false; 　　} 　　if (!isValid) { 　　　　return; 　　} 　　document.form1.submit(); } </script> <form name="form1" id="form1" method="POST" name="form1" action="insert.php"> <input type="text" name="tel" value="" /> <input type="text" name="fax" value="" /> <input type="submit" value="送信B" onclick="check3();"> </form> *************************************************** 【上記の2つを組み合わせてみました。】【動きません】 テキストボックスが空欄だったらアラートを表示しながら2重ボタン排除&finish.htmlに遷移というものです。 【結果】 「問題なく動くjavascript」2つを単純に組み合わせただけなのですが、 finish.htmlに遷移せずinsert.phpが表示されます。ご指導宜しくお願いします。 <script type="text/javascript" src="js/jquery.js"></script> <script> jQuery(function($) { $('#form1').submit(function(event) { event.preventDefault(); var $form = $(this); var $button = $form.find('button'); $.ajax({ url: $form.attr('action'), type: $form.attr('method'), data: $form.serialize() + '&delay=1', timeout: 10000, beforeSend: function(xhr, settings) { $button.attr('disabled', true); }, complete: function(xhr, textStatus) { $button.attr('disabled', false); }, success: function(result, textStatus, xhr) { $form[0].reset(); location.href = "finish.html"; }, error: function(xhr, textStatus, error) { alert('retry');} }); }); }); </script> <script> function check3() { 　　var tel3 = document.form1.tel.value; 　　var fax3 = document.form1.fax.value; 　　var isValid = true; 　　if (!tel3) { 　　　　alert("電話未入力"); 　　　　isValid = false; 　　} 　　if (!fax3) { 　　　　alert("FAX未入力"); 　　　　isValid = false; 　　} 　　if (!isValid) { 　　　　return; 　　} 　　document.form1.submit(); } </script> <form name="form1" id="form1" method="POST" name="form1" action="insert.php"> <input type="text" name="tel" value="" /> <input type="text" name="fax" value="" /> <input type="submit" value="送信B" onclick="check3();"> </form>

  • JavaScript動作仕様の変更！？

    以前は動作していたものが最近のIEパッチ（？）で動作しなくなった気がします。もし解決方法があれば教えて下さい！ ------------------------------------- <HTML> <HEAD> <TITLE></TITLE> <SCRIPT type="text/javascript"> <!-- function test() { document.form.submit(); } function test2() { alert( "!!" ); return true; } --> </SCRIPT> </HEAD> <BODY> <FORM name="form" onSubmit="return test2()"> <INPUT type="button" value="おす" onClick="test()"> </FORM> </BODY> </HTML> ------------------------------------- 以前だと、JavaScriptでのsubmit()コマンドで、きちんとonSubmitイベントも動作していたハズなんですが、ここ数日でボタン部分を <INPUT type="submit" value="おす"> としないとonSubmitイベントが動作しなくなった様に思えます。ここ数日でWindowsUpdateした端末数台でチェックしましたが同様でした。

  • テキストボックス未記入時のアラート表示 JS

    【出来ていること】 下記のように電話番号の未入をチェックしアラートを出すことができました。 <script> function check3() { tel3check = document.form3.tel3.value; data13 = tel3check; if(!data13) { alert("電話番号が未入力です13"); return; } else { document.form3.submit(); } } </script> <form method="POST" action="in.php" name = "form3"> <input type="text" name="tel3" value="" /> <input type="button" value="確認" name="sub1" onclick="check3();"> </form> 【躓いていること】 電話番号の未入だけでなく、FAXの未入もチェックしそれぞれでアラートを出そうとしましたが動きません。ご指導いただけますでしょうか? よろしくお願いいたします。 <script> function check3() { tel3check = document.form3.tel3.value; fax3check = document.form3.fax3.value; data13 = tel3check; data133 = fax3check; if(!data13) { alert("電話番号が未入力です13"); return; } elseif(!data133) { alert("FAX番号が未入力です133"); return; } else { document.form3.submit(); } } </script> <form method="POST" action="in.php" name = "form3"> <input type="text" name="tel3" value="" /> <input type="text" name="fax3" value="" /> <input type="button" value="確認" name="sub1" onclick="check3();"> </form>

  • Firefox:JavaScriptのsubmit

    JavaScriptで、以下のようにsubmitしていますが、 IEではOKで、Firefoxでは「送信開始」ボタンで反応がありません。 Firefoxではどのように書けばよいのでしょうか？ 以下は、テストのため省略できるギリギリまで省略していますので、意味のないスクリプトになってますが、実際にはJavaScriptで空白個所のチェックのロジックを入れています。 <html> <head> <script language="JavaScript"> <!-- function check1(){ document.FORM1.submit(); } ---> </script> </head> <form action='http://hogehoge.jp' method='post' name="FORM1"> <input type='button' value='送信開始' onClick="check1()"> </form> </body> </html>

  • JavaScriptがFirefoxで動かない・・・

    よろしくお願いいたします。 IEでは正常に動作するのですが、Firefoxで実行してみると ボタンを押しても何の反応もありません。 どのように変更すればFirefoxで動作するのでしょうか？ よろしくお願いいたします。 <SCRIPT LANGUAGE="JavaScript"> <!-- function warning(){ alert("テストです。"); } //--> </SCRIPT> <FORM><INPUT type="button" value="ボタンを押して。" onClick="warning()"></FORM> 上記のコードを外部に独立させて・・・ 【コード】 <script type="text/javascript" src="sample3.js"></script> <input type = "button" name = "button3" value = "sample3" onclick = "Func3();"> 【sample3.js】 function Func3() { alert("js外部ファイル記述"); } です。 FC2ブログで活用したいのですが・・・ 改行の扱いは「HTMLタグのみ」に設定しています。 ご回答、よろしくお願いいたします。

  • javascript 乱数が取得できない

    はじめまして。 一月ほど前から「パズルネット　ソフィア」 http://www.pori2.net/js/number/4.html というサイトでjavascriptの基礎を学んでいるのですが、乱数 を扱う段階になって自分の作成したプログラム（以下） <html> <head> </head> <body onload="Mondai()"> <form name="quiz"> <input type="text" value="" > <input type="button" value="赤" onclick="Push(0)"> <input type="button" value="青" onclick="Push(1)"> <input type="button" value="黄" onclick="Push(2)"> <input type="button" value="緑" onclick="Push(3)"> <input type="button" value="白" onclick="Push(4)"> </form> <script type="text/javascript"> <!-- var col=new Array("red","bleu","yellow","green","white"); var Rnd; function Mondai(){ Rnd=Math.floor(Math.random() * 5 ); document.quiz.element[0].value=col[Rnd]; } function Push(num){ var n=parseInt(num); if( n==Rnd ){ Mondai(); }else{ alert("違います。"); } } // --></script> </body> </html> を実行してもテキストボックス内に何の値も表示されず 、ボタンを押しても「違います。」とだけしか出てきません。 ブラウザはfirefoxを使用しており、javascriptの設定もonに なっています。 カンマや鍵括弧などの記号にも打ち間違いがないかサンプル プログラムを参考にしながら確認してみたのですが、どこにも おかしな点はありませんでした。 サンプルプログラムは下記のとおりで、こちらは正常に実行されます。 <body onload="Mondai()"> <form name="quiz"> <input type="text" value=""> <input type="button" value="赤" onclick="Push(0)"> <input type="button" value="青" onclick="Push(1)"> <input type="button" value="黄" onclick="Push(2)"> <input type="button" value="緑" onclick="Push(3)"> <input type="button" value="白" onclick="Push(4)"> </form> <script type="text/javascript"> <!-- //色名の英単語を配列に入れる var col=new Array("red","blue","yellow","green","white"); //乱数を入れる変数 var Rnd; //テキストボックスに問題文（色名）を表示する関数 function Mondai(){ //0～4までの乱数を発生させる Rnd=Math.floor( Math.random() * 5 ); document.quiz.elements[0].value=col[Rnd]; } //正誤判定関数 function Push(num){ //引数を数字に変換 var n=parseInt(num); //正解なら次の問題を表示、間違っていたらアラートを表示する if ( n == Rnd ){ Mondai(); }else{ alert("違います！"); } } // --> </script> どなたかアドバイスをいただけないでしょうか？ よろしくお願いします。

  • JavaScriptのinput要素のonclick内で直接JavaS

    JavaScriptのinput要素のonclick内で直接JavaScript文を書きたい <input type="button" onclick="func()" value="ボタン"> のようにonclick内で関数を呼び出すことはできますが、 以下のようにスクリプトを直接書き込むのは可能でしょうか？ （これは私が適当に考えただけなので多分動作はしませんが） <input type="button" onclick="javascript:( var a = 123; alert( a ); )" value="ボタン"> というのもちょっと試したいだけのときなど、 なるべく外部呼出しにしたくないことも多々あるもので・・

  • チェックボックスのjavascriptについて

    javascript初心者です！ お力をお借りしたいと思い質問いたしました。 宜しくお願い致します。 ●やりたい事 ・チェックボックスがチェックされてない時に「商品を選択して下さい」のアラートを表示させ、1つでもチェックされていた場合は「送信」できる設定を行いたいです。 「name=　」　部分を同じ名前にすると可能ですが、異なる名前にすると動作いたしません。 どうかご教授お願い致します。 ■javascript部分 <script language="JavaScript" type="text/javascript"> function CheckForm(theform) { var FormOK = false; if (!theform.category1[0].checked && !theform.category2[1].checked && !theform.category3[2].checked && !theform.category4[3].checked && !theform.category5[4].checked) { alert("商品を選択してください。"); }else{ FormOK = true; } return FormOK; } function FieldControl(element, message) { alert(message); } </script> ■HTML部分 <form name="theform" onsubmit="return CheckForm(this);" action="" method="post"> <input value="category1" name="category1" type="checkbox">category1<br> <input value="category2" name="category2" type="checkbox">category2<br> <input value="category3" name="category3" type="checkbox">category3<br> <input value="category4" name="category4" type="checkbox">category4<br> <input value="category5" name="category5" type="checkbox">category5<br><br> <br> <br> <input value="送信" name="submit" type="submit"></form> 宜しくお願い致します。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する