テキスト入力の制御方法について

このQ&Aのポイント
  • テキスト入力の制御方法について質問です。テキストとチェックボックスがあり、チェックボックスにチェックをした段階でテキストの入力を無効にする方法を知りたいです。
  • また、テキストを入力している状態でもチェックボックスにチェックをすれば入力してあるテキストを無効にする方法も教えてください。
  • 現在はphpでエラーチェックを行っていますが、javascriptで入力制御をする方法がわかりません。
回答を見る
  • ベストアンサー

テキスト入力の制御

<input type="text" name="num" value="" /> <input type="checkbox" name="check" value=""> とテキストとチェックボックスがあるとします。 チェックボックスにチェックをした段階でページの切り替えなどを しなくてもテキストのnumを入力できない状態にしたいのですが どうすれば可能でしょうか? 可能であれば先にテキストを入力している段階でもチェックをすれば 入力してあるテキストを無効にし入力できない状態に切り替えたいと 思っております。 どちらかの入力を必須項目としエラーチェックはphpで行うのですが javascriptで入力を制御する方法がわかりません。

  • dcx147
  • お礼率33% (214/636)

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

  • ベストアンサー
  • yambejp
  • ベストアンサー率51% (3827/7415)
回答No.3

IEの場合disabledされたテキストボックスの文字色を変えることは できませんので、背景色で調整ください <script> function setPrevDisable(obj){ var n=obj.previousSibling; while(n){ if(n.nodeName=="INPUT" && n.type=="text") break; n=n.previousSibling; } //n.value=""; n.disabled=obj.checked; n.style.backgroundColor=obj.checked?"#c0c0c0":"#ffffff"; } </script> <form> <input type="text" name="num" value="" /> <input type="checkbox" name="check" value="" onClick="setPrevDisable(this)"> </form>

dcx147
質問者

お礼

お返事ありがとうございます。 背景色もjs側で制御できるのですね~参考になります。 おかげさまで解決できましたので締め切らせて頂きます。 わかりやすいご説明をして頂きありがとうございました!

その他の回答 (2)

  • yambejp
  • ベストアンサー率51% (3827/7415)
回答No.2

この場合、入力できないというのはデータを無効にするとの 認識でよろしいですね? であれば、disabledがよろしいかと。 またチェックをしたときにテキストをクリアするのであれば コメントアウトしてあるvalueに""を代入する行を有効にしてください <script> function setPrevDisable(obj){ var n=obj.previousSibling; while(n){ if(n.nodeName=="INPUT" && n.type=="text") break; n=n.previousSibling; } //n.value=""; n.disabled=obj.checked; } </script> <form> <input type="text" name="num" value="" /> <input type="checkbox" name="check" value="" onChange="setPrevDisable(this)"> </form>

dcx147
質問者

お礼

早速のお返事ありがとうございます! 思うように動作させることができました^^ テキストを入力できるか否かをわかりやすくするために チェックがついている場合はテキストの背景をグレーにするなど 安易に判別ができればいいかと思ったのですがどう変更すれば いいいもでしょうか? <input type="checkbox" name="check" value="" onChange="setPrevDisable('#666666')"> のように背景色を設定しjs側で背景の指定などを行うという 流れになるかとは思うのですが正解に結び付けません^^;

  • SAYKA
  • ベストアンサー率34% (944/2776)
回答No.1

関連するQ&A

  • チェックボックスを選択するとテキストボックスが表示

    質問失礼します。 チェックボックスが下記のようにある場合ですが、 どれかではなく複数選択で テキストボックスを表示させるにはどうしたらよいでしょうか? <input type="checkbox" name="example" value="" />テレビ ←チェックしたらテキストボックス表示 <input type="checkbox" name="example" value="" />新聞 ←チェックしたらテキストボックス表示 <input type="checkbox" name="example" value="" />CM ←チェックしたらテキストボックス表示 <input type="checkbox" name="example" value="" />その他 ←チェックしたらテキストボックス表示 色々なJavaScriptを試したのですが、 どうも挙動がおかしく、クリックを続けると表示がされたりできなかったり、 という具合になります。 それぞれテキストボックスを表示させたいチェックボックスに 反映できるJavaScriptをご教示願いますでしょうか? 宜しくお願い致します。

  • 選択肢によって入力必須が変わるフォームの入力チェックJavaScrip

    選択肢によって入力必須が変わるフォームの入力チェックJavaScript フォームの入力チェックのJavaScriptを作成しています。 特定のラジオボタンにチェックを入れた場合のみ、 入力必須になるテキストボックスの 入力チェックJavaScriptを教えてください。 ラジオボタンが複数あるフォームで、 <input type="radio" name="type" value="type1" /> <label>タイプ1</label> <input type="radio" name="type" value="type2" /> <label>タイプ2</label> タイプ2を選んだ場合のみ、必須項目にしたいテキストボックスがあります。 <input type="text" name="name1" /> テキストボックスが空白だった場合にアラートを出すJavaScriptは 現在このようになっています。 (参考にしていたサイトがあるのですが、忘れてしまいました・・・。) $(function(){ $("form1").submit(function(){ if($("input[name='name1']").val()==""){ $("input[name='name1']").css("border","1px solid #A70F00"); alert('必須項目に未入力があります'); return false; }) }) このJavaScriptをさらに、if文で括って、 name="type" の value が type2 であれば・・・、という処理を追加すればよいのだと 思いますが、書き方が分からず困っています。 どうかよろしくお願いします。

  • フォームの制御について

    下記2つのJavaScriptについて正しい記述方法について、 どうすれば良いかを模索しています。 アドバイスを頂ければ幸いです。 どうぞ何卒よろしくお願い致します。 1.チェックボックスの値とテキストフォームの値を結合する方法 <!-- C02の中から選択されているものを取得// --> for ( var i = 0; i < checkbox02.length; i ++ ) { if ( checkbox02[i].checked === true ) { text += checkbox02[i] + text01. value; text += '\n';}} 2.テキストエリアの値がNullの時に値が出力されないようにする方法 <!-- textarea01の中から選択されているものを取得// --> text += '回答3:' + textarea01 + '\n'; ソース: ----------------------------------------------------------------------------------------- <head> <title>アンケートフォーム</title> <script type="text/javascript">  <!-- 値の加工用// --> function textoutput() { <!-- フォームを変数に// --> var formObj = document.form01; <!-- checkbox01を取得// --> var checkbox01 = formObj.C01; <!-- checkbox02を取得// --> var checkbox02 = formObj.C02; <!-- text01.valueを取得// --> var text01 = formObj.text01.value; <!-- textarea01.valueを取得// --> var textarea01 = formObj.textarea01.value; <!-- textを結合用の変数として準備// --> <!-- チェックボックスの中から選択されているものを取得// --> var text = 'アンケート結果' + '\n'; <!-- C01の中から選択されているものを取得// --> for ( var i = 0; i < checkbox01.length; i ++ ) { if ( checkbox01[i].checked === true ) { text += checkbox01[i]. value; text += '\n';}} <!-- C02の中から選択されているものを取得// --> for ( var i = 0; i < checkbox02.length; i ++ ) { if ( checkbox02[i].checked === true ) { text += checkbox02[i] + text01. value; text += '\n';}} <!-- textarea01の中から選択されているものを取得// --> text += '回答3:' + textarea01 + '\n'; <!-- output.valueにtextを反映(最後に改行コード)// formObj.output.value = text + '\n'; } </script> </head> <body> <strong>アンケートフォーム</strong><br /><br /> <form name="form01"> <!--チェックボックスC01// --> <strong>・回答結果</strong><br /> <table border="0" > <td colspan="2" valign="middle"width="560"> <input type="checkbox" name="C01" value=" →回答1" id="checkbox 1-1" > <label for="checkbox 1-1">回答1</label> <input type="checkbox" name="C01" value=" →回答2" id="checkbox 1-2" > <label for="checkbox 1-2">回答2</label> </td> <tr> <!--チェックボックスC02// --> <td width="86" valign="middle"> <input type="checkbox" name="C02" value=" →その他:" id="checkbox 1-1" > <label for="checkbox 1-1">その他:</label> </td> <td valign="middle"> <input type="text "name="text01" size="60" /><br> </td> </table> <strong>・回答3:</strong><br /> <textarea name="textarea01" cols="60" rows="1" " tabindex="1" STYLE="ime-mode:active"></textarea><br> <!--結果出力// --> 結果出力<br> <input type="button" value="ログ出力" onClick="textoutput();"> <input type="reset" value="リセット" onclick="return confirm('リセットボタンがクリックされました。本当に入力内容を削除してもよろしいですか?');" /><br> <input type="button" name="Copy" value="クリップボードにコピー" onClick="CopyText('output');"><br> <textarea name="output" id="output" cols="60" rows="10"></textarea><br> </form> </body> </html>

  • PHP更新フォーム チェックボックス

    入力フォームにて、チェックボックスがあり、チェック送信すると"済"という文字をDBに格納します。 <input type='checkbox' name='check' value='済'> DBに済が格納されていたら、更新フォームのチェックボックスに、チェックが入ってる状態に したのですが、どのようにしたら良いでしょうか? <input type="text" name="checkbox" value="<?php print( $row->checkbox); ?>"> のようにしてもうまくいきません。 ご教授おねがいします。

    • 締切済み
    • PHP
  • チェックボックスのvalueを、テキストボックスに挿入したい

    文末のように、4つのチェックボックスと1つのテキストボックスがあります。 (1) チェックボックスのチェックに伴い各チェックボックスのvalueを そのままテキストボックスの方に転記したいです。 (2) 逆に、チェックが外れたら、該当する valueをクリアしたいです。 (3) 鉄道~航空の一つ以上にチェックが入っている間、テキストボックス自体 をreadonlyにし、手動でいじれなくしたいです。 逆に、全てのチェックが解除されている間は、自由記述可能です。 (4) チェックする前に何らかの値が入っていたら、それらは強制クリアして、 valueの方を優先したいです。 イメージとして、「鉄道」と「航空」にチェックが入ったら、テキストボックスの値は 「新幹線 在来線 ヘリコプタ ジャンボ 」となります。 現在、テキストボックスはReadOnlyです。 そして「鉄道」の方だけチェックが解除されたら、テキストボックスの値は 「ヘリコプタ ジャンボ 」となります。テキストボックスは、まだReadOnlyです。 さらに「航空」のチェックも解除されたら、テキストボックスの値は 空白「」となります。テキストボックスのReadOnlyも解除されます。 <html> <head> </head> <body> <form method="post" action="samp.php" id="query" name="query"> <input type="checkbox" class="norimono" name="norimono[]" value="新幹線 在来線 ">鉄道 <input type="checkbox" class="norimono" name="norimono[]" value="軽 セダン クーペ ">四輪車 <input type="checkbox" class="norimono" name="norimono[]" value="小型 中型 大型 ">二輪車 <input type="checkbox" class="norimono" name="norimono[]" value="ヘリコプタ ジャンボ ">航空 <input value="" size="50" type="text" name="keyword"> </form> </body> </html>

  • フォームに入力したデータの受け渡しについて

    左右に分かれたフレームを使用したページ作成を検討しています。 左フレーム内のフォームへ入力したテキストやチェックボックスのデータを、 右フレームに設置した1つのテキストエリアへコピーボタンで受け渡しを行う方法を探しています。 テキストボックス1行だけの受け渡しはできるのですが、 複数のテキストエリアやチェックボックスを使用した場合の受け渡し方法をご教示いただきたけますでしょうか? 左フレームとしては↓のような内容を想定しています。 <html> <form> テキスト:</br> <input type="text" name="aaa" /></br> ラジオ:</br> <input type="radio" name="bbb" value="radio1" checked="checked" /> ラジオ1 <input type="radio" name="bbb" value="radio2" /> ラジオ2</br> チェック:</br> <input type="checkbox" name="ccc" value="check1" /> チェック1 <input type="checkbox" name="ccc" value="check2" /> チェック2</br> 選択項目:</br> <select name="ddd"> <option>A</option> <option>B</option> </select></br> テキストエリア</br> <textarea name="eee" rows="2" cols="15">テキストエリア1</textarea> </br> <input type="submit" value="送信" />  <input type="reset" value="リセット" /> </form> </html> よろしくお願いいたします。

  • テキストボックスに関して質問です

    ページ間でのテキストボックスからテキストボックスへの文章の移行って可能でしょうか? tezt1.htmlってページにある 名前⇒<INPUT TYPE="text" NAME="name1"> 住所⇒<INPUT TYPE="text" NAME="adres1"> のテキストボックスに入力された文章を 入力ボタン <INPUT type="button" value="入力" onClick="・・・・・"> を押すと、下に用意してあるテキストボックス(別ページ)に入力した値が入るようにしたいのです。 tezt2.htmlの 名前⇒<INPUT TYPE="text" NAME="name2"> 住所⇒<INPUT TYPE="text" NAME="adres2"> 事情が有り一つのページで行えません。 フレームわけしたページで移行して使用したいのですが… 質問し方が悪くて大変申し訳有りません。宜しくお願いします。

    • ベストアンサー
    • HTML
  • JavaScriptで入力チェック

    ////サンプル//// <p><input type="text" value="" name="box_1" /></p> <p><input type="text" value="" name="box_2" /></p> <p><input type="text" value="" name="box_3" /></p> <p><input type="text" value="" name="box_4" /></p> Javascriptで入力チェックをして 入力がされていたらpタグとinputタグの間に「○」を表示させたいのですが どのように実装したら良いでしょうか? ・inputタグは4つだけではなくたくさんあります ・DBを使っているのでページを更新しても○が消えないようにしたいです よろしくお願いします!

  • javascriptでのテキストボックス制御

    javascriptを使用して 特定のテキストボックスを動的に enable←→disableを切り替えたく、様々なホームページを見ながら試行錯誤して、下記ソースまで辿りつきましたが、うまく動かなくて困っています。 どうかご教示ください。よろしくお願いします。 現状:チェックをいれると enable→disableになるが、外すと戻らない。 目標:同上+チェック外すと最初disableも含めて、enableになる。 <html> <head> <script language="javascript" type="text/javascript"> function autochk(f){ for(var i=0;i<f.form.length;i++){ if (f.form.elements[i].className=="ko"){ if (f.form.elements[i].checked){ //checked チェックが入っていたら f.form.elements[i].disabled = false; // 入力不可, 無効化 }else{ f.form.elements[i].disabled = true; // 入力可能,有効化 } } } } </script> <style type="text/css"> <!-- ul li { list-style: none; } label { margin-right: 10px; width:200px; float: left; } --> </style> </head> <body> <form> <ul> <li><input type="checkbox" name="oya" value="1" onclick="autochk(this);">チェック</li> <li><label>無効→チェック→無効→有効</label><input type="text" name="ko1" class="ko" value="1" disabled></li> <li><label>有効→チェック→無効→有効</label><input type="text" name="ko2" class="ko" value="1"></li> <li><label>有効→チェック→そのまま</label><input type="text" name="other1" value="1"></li> <li><label>有効→チェック→無効→有効</label><input type="text" name="ko3" class="ko" value="1"></li> <li><label>有効→チェック→無効→有効</label><input type="text" name="ko4" class="ko" value="1"></li> <li><label>有効→チェック→そのまま</label><input type="text" name="other2" value="1"></li> </form> </ul> </body> </html>

  • jQueryによるチェックボックスの制御

    いつもお世話になっています。 只今jQueryを勉強中なのですがチェックボックスの制御が上手くできずに困っています。 <li>リスト1</li> <li>リスト2</li> <li>リスト3</li> <input type="checkbox" id="list1" name="example" value="">リスト1 <input type="checkbox" id="list2" name="example" value="">リスト2 <input type="checkbox" id="list3" name="example" value="">リスト3 リスト1をクリックした時はチェックボックス1にチェックが入り他のチェックが外れる リスト2をクリックした時はチェックボックス2にチェックが入り他のチェックが外れる この様な処理ができるようにしたいのですが jqueryでこちらを再現することができるのでしょうか? もしよろしければどなたかご教示ください。

    • ベストアンサー
    • AJAX