- ベストアンサー
JavaScriptで次のような動作を実現したいと思います。
JavaScriptで次のような動作を実現したいと思います。 【状況】 テキストフォームが1つ、セレクトボックス（空白、選択肢a、選択肢b）が1つ、ラジオボタンが2つある状況。 【動作】 ラジオボタンＡを選択した場合は、テキストフォームもセレクトボックスも入力可能。 ラジオボタンＢを選択した場合は、テキストフォームおよびセレクトボックスがクリア（空白）され、かつdisableとなる。 動作自体はシンプルだと思うのですが、上手く作れません。 ご存知の方がいらっしゃいましたら教えていただけますでしょうか。 よろしくお願いします。
- shalalala
- お礼率78% (54/69)
- JavaScript
- 回答数5
- ありがとう数19
- みんなの回答 （5）
- 専門家の回答
質問者が選んだベストアンサー
元となるフォームすらないので、どんな制約があるか分かりませんが、 何の制約も条件も無ければ、私なら下記のように実現します。 <html> <body onload="initScript();"> <script type="text/JavaScript"> <!-- function myFormEnable() { // テキストボックスを enable に変更 document.myForm.myText.disabled = false; // リストボックスを enable に変更 document.myForm.myList.disabled = false; } function myFromDisable() { // テキストボックスを空白に document.myForm.myText.value = ""; // リストボックスは0番目を選択 document.myForm.myList.selectedIndex = 0; // テキストボックスを disable に変更 document.myForm.myText.disabled = true; // リストボックスを disable に変更 document.myForm.myList.disabled = true; } // ページロード後に初期化処理を実行 function initScript() { // ラジオボタンの0番目のクリックイベントをmyFormEnableに紐付ける document.myForm.myRadio[0].onclick = myFormEnable; // ラジオボタンの1番目のクリックイベントをmyFromDisableに紐付ける document.myForm.myRadio[1].onclick = myFromDisable; } --> </script> <form name="myForm"> <input type="text" name="myText"> <select id="myList"> <option value=""></option> <option value="A">選択肢A</option> <option value="B">選択肢B</option> </select> <input type="radio" name="myRadio" value="A" checked>RadioA <input type="radio" name="myRadio" value="B">RadioB </form> </body> </html>
その他の回答 (4)
- steel_gray
- ベストアンサー率66% (1052/1578)
よいサンプル回答がたくさんあるのでコメントだけ。 ＞ラジオボタンＢを選択した場合は、テキストフォームおよびセレクトボックスがクリア（空白）され、かつdisableとなる。 これ、disabled化だけでよくないですか？ disabledにしておけば送信されないわけだし、 ラジオボタンＢを間違ってクリックして、Ａに元に戻したらtextareaへの入力内容や選択した内容が初期化されてるって不親切な気がする。 あと、このフォームにresetボタンはありますか？ あるならそれなりにjavascriptでも対応しておかないとリセットした時おかしくなる。
お礼
お礼が遅くなりましたことお詫び申し上げます。 確かに不親切な気もしますが、お客様の要望もあり そのままの仕様で開発いたしました。 また、リセットの懸念もありがとうございます。 今回はありませんでしたが、今後の開発では注意したいと思います。 ありがとうございました。
- babu_baboo
- ベストアンサー率51% (268/525)
もっと、もっと詳しい方が後から回答されるかもしれない！ ちなみに、わたしは、「くわしい」のではなく、自称「むだなかとうがおおい」です ぜんかくくうはくは、はんかくにしてちょ。 こういう、いんたーふぇーすは、だめだというひともいます。 すくりぷと、むこうのひとのことも、かんがえてね <!DOCTYPE html> <title></title> <body> <form name="form1" action="#"> <p> <label for="ra"><input type="radio" name="r1" id="ra" value="A" onclick="fuga.open()" checked>ラジオA</label> <label for="rb"><input type="radio" name="r1" id="rb" value="B" onclick="fuga.close()">ラジオB</label> </p> <div id="fuga"> <textarea cols="40" rows="5">適当な文字を </textarea><br> <select name="sample"> <option value="" selected>----------</option> <option value="a">選択肢a</option> <option value="b">選択肢b</option> </select> </div> </form> <script type="text/javascript"> var Shutter = function ( n, g ) { var tmid = 0, time = 0, span = 20, s = n.style; this.open = function ( ) { start (g = Math.abs(g)) }; this.close = function ( ) { start (g = -Math.abs(g)) }; this.toggle = function ( ) { start (g *= -1) }; function stop ( ) { tmid && clearInterval( tmid ); tmid = time = 0 }; function start ( ) { stop(); tmid = setInterval( move, span ) }; function move ( ) { var y = n.offsetHeight + g * (time += span) |0; if (((n.scrollHeight < y) && (y = n.scrollHeight)) || ((y < 0) && !(y=0))) stop(); s.height = y + 'px'; }; n.style.overflow = 'hidden'; 0 < g ? this.open(): this.close(); }; Shutter.create = function (eid, g) { var n = document.getElementById (eid); return n ? new Shutter (n, g || 0.1): null; }; var fuga = Shutter.create ('fuga', 0.12); </script>
お礼
お礼が遅くなってしまって申し訳ありません。 難しくてうまく理解できませんが、勉強してまいります。 どうもありがとうございました。
- zeff
- ベストアンサー率69% (137/198)
もっと詳しい方が後から回答されるかもしれないので、 締め切らずにしばしお待ちください。 自分は自分なりの回答をさせてもらっています。 Aを選ぶ→true(b)を渡す→disabledを!bつまりfalse →入力可能・選択可能になる。 Bを選ぶ→逆。 そして!bつまり引数がfalseである場合のみ、 ＞テキストフォームおよびセレクトボックスがクリア（空白）され →ta.value = ""; →s.selectedIndex = 0; <script type="text/javascript"> <!-- function test(f,b){ ta = f.getElementsByTagName("TEXTAREA")[0]; s = f.getElementsByTagName("SELECT")[0]; ta.disabled = !b; s.disabled = !b; if(!b){ ta.value = ""; s.selectedIndex = 0; } } //--> </script> </head> <body> <form name="form1" action="#"> <div><textarea cols="40" rows="5" disabled></textarea></div> <p> <select name="sample" disabled> <option value="" selected>----------</option> <option value="a">選択肢a</option> <option value="b">選択肢b</option> </select> </p> <p> <label for="ra"><input type="radio" name="r1" id="ra" value="A" onclick="test(this.form,true)">ラジオA</label> <label for="rb"><input type="radio" name="r1" id="rb" value="B" onclick="test(this.form,false)">ラジオB</label> </p> </form> </body> </html>
お礼
お礼が遅くなって大変申し訳ありませんでした。 理解するのに時間がかかりましたが、こんな方法もあるんですね。 勉強になりました。ありがとうございました。
- SAYKA
- ベストアンサー率34% (944/2776)
どううまく作れなかったのかを補足した方が良いよ。 特にソース。 まず最初に行うのは、扱いや取得がしやすいテキストフォーム。 ここにvalueを設定しておいてalertとかで値を取り出せるようにしたら良いよ。 そういう取り出しのサンプルは沢山出てくるだろうからね。 取り出しできたら今度は他のラジオボタンとかの状態も取得できるようになるとおもうから そこを足がかりに 取り出しじゃなくて値を代入してdisable等を実現すると良いよ。 まずはテキストフォームへの操作から・・・ http://www.tohoho-web.com/js/form.htm
お礼
お礼が遅くなって大変申し訳ありませんでした。 普段javaScriptは触らないものですから、 基本的な知識が不足しておりました。 勉強してまいります。 ありがとうございました。
お礼
お礼が遅くなって大変申し訳ありませんでした。 実現したい方法にかなり近かったので、 ずいぶん参考にないました。たすかりました。 ありがとうございました。