- ベストアンサー
javascriptで編集可能不可能の切り替え
いつもお世話になっております。 javascriptを用いて、テキストボックスを状況によって編集可能、不可能を 変更するものを作っております。 現在、テキストボックス単品ではその動作が可能となっていますが、 複数のものに対してその動作を行うには、どうすればよいかわからず困っています。 現在のソースは以下のようになっています。必要な部分だけ抜き出しています。 <script type="text/javascript"> function display() { var tmp = prompt("password?",""); //表示させるかどうか判別する if (tmp == 1) { document.getElementById("textboxのID").readOnly = false; } else if (tmp == 2) { document.getElementById("textboxのID").readOnly = true; } } </script> <body onload="display();"> ・・・・ </body> テキストが一つや二つ程度ならこれでも十分ですが、今回は テキストボックスが多数(100程度)あるので、このまま地道にやるのはどうかと思いました。 IDを数字にして、 for (var i = 0; i < 100; i++) { document.getElementById(i).readOnly = true; } とやってみましたが、これもdocument.getElementById("0") = true;単品では 成功しましたが、iが定義されていないというようなエラーメッセージが表示されて、 うまくいきませんでした。 以上の件を、ご教授お願いします。
- iec1128
- お礼率43% (70/161)
- JavaScript
- 回答数2
- ありがとう数5
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
こんにちは 単品、複数、a～bまで どれか分からなかったので一応単品、複数両方載せときます （一応『複数に対して』とあるので複数だとは思いますが、スクリプトサンプルを見ると数字にあわせたtextboxをreadonly=false;にするのかなと思ったりもして・・・） あとidを数字からはじめるのはＮＧになります 【単品】 <script type="text/javascript"> function display() { var tmp = prompt("password?",""); //表示させるかどうか判別する if(tmp > 0 && tmp < 101) { target = "b" + tmp+""; document.getElementById(target).readOnly = false; } else { return false; } } </script> <body onload="display1();"> <input type="text" id="b1" readonly> <input type="text" id="b2" readonly> 以下 id="b100" まで 【複数】 <script type="text/javascript"> //class名を指定する為の準備// document.getElementsByClassName = function (className) { var i, j, eltClass; var objAll = document.getElementsByTagName ? document.getElementsByTagName("*") : document.all; var objCN = new Array(); for (i = 0; i < objAll.length; i++) { eltClass = objAll[i].className.split(/\s+/); for (j = 0; j < eltClass.length; j++) { if (eltClass[j] == className) { objCN.push(objAll[i]); break; } } } return objCN; } function display() { var tmp = prompt("password?",""); //表示させるかどうか判別する if(tmp > 0 && tmp < 101) { target = "b" + tmp+""; obj = document.getElementsByClassName(target); for(i=0;i<obj.length;i++) { obj[i].readOnly = false; } } else { return false; } } </script> <body onload="display();"> <input type="text" class="b1" readonly> <input type="text" class="b2" readonly> <input type="text" class="b1" readonly> <input type="text" class="b1" readonly> <input type="text" class="b2" readonly> ※デフォルトのreadonlyが逆であるなら <input>のreadonlyを消して obj = document.getElementsByTagName("input"); for(i=0;i<obj.length;i++) { obj[i].readOnly = true; } を if(tmp > 0 && tmp < 101) { の下に入れてください ※if(tmp > 0 && tmp < 101)の数値【101】は 単品の場合はid="b100"まで作る予定(?)なので101にしてます(idの数を指定） 複数の場合はclassの数を指定してください（class="b5"まで分けるなら『6』を指定）
その他の回答 (1)
- HIRSYU
- ベストアンサー率51% (45/87)
id="textboxArea"のタグの中にある全てのテキストボックスのreadOnlyを変更するサンプル。 ページ内のテキストボックス全てを変更していいのなら、「id="textboxArea"のタグの中」から「bodyの中」に変えればOK。 JavaScriptを、 function display() { var elemArea = document.getElementById("textboxArea"); var elemTextboxList = document.getElementsByTagName("input"); var tmp = prompt("password?",""); if (tmp == 1) { for (var i = 0; i < elemTextboxList.length; i++) { if (elemTextboxList[i].type = "text") { elemTextboxList[i].readOnly = false; } } } else if (tmp == 2) { for (var i = 0; i < elemTextboxList.length; i++) { if (elemTextboxList[i].type = "text") { elemTextboxList[i].readOnly = true; } } } } HTMLを、下記のように、対象テキストボックスをid="textboxArea"のタグの中に入れる。 <div id="textboxArea"> <input type="text" /> <input type="text" /> <input type="text" /> <input type="text" /> <input type="text" /> <input type="text" /> <input type="text" /> </div>
お礼
ご回答ありがとうございました。 希望のものを作ることができました。 これを応用していけばいろいろな状況に対応できそうです。 ありがとうございました。
お礼
ご回答ありがとうございます。 状況に応じて、複数のサンプルを提示していただき本当に 感謝しております。 これらをうまく応用できるようこれからも学んで生きたいと思います。