いつもお世話になっております。
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が定義されていないというようなエラーメッセージが表示されて、
うまくいきませんでした。
以上の件を、ご教授お願いします。
No.2ベストアンサー
- 回答日時:
こんにちは
単品、複数、a~bまで
どれか分からなかったので一応単品、複数両方載せときます
(一応『複数に対して』とあるので複数だとは思いますが、スクリプトサンプルを見ると数字にあわせたtextboxをreadonly=false;にするのかなと思ったりもして・・・)
あとidを数字からはじめるのはNGになります
【単品】
<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』を指定)
ご回答ありがとうございます。
状況に応じて、複数のサンプルを提示していただき本当に
感謝しております。
これらをうまく応用できるようこれからも学んで生きたいと思います。
No.1
- 回答日時:
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>
ご回答ありがとうございました。
希望のものを作ることができました。
これを応用していけばいろいろな状況に対応できそうです。
ありがとうございました。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・14歳の自分に衝撃の事実を告げてください
- ・架空の映画のネタバレレビュー
- ・「お昼の放送」の思い出
- ・昨日見た夢を教えて下さい
- ・ちょっと先の未来クイズ第4問
- ・【大喜利】【投稿~10/21(月)】買ったばかりの自転車を分解してひと言
- ・メモのコツを教えてください!
- ・CDの保有枚数を教えてください
- ・ホテルを選ぶとき、これだけは譲れない条件TOP3は?
- ・家・車以外で、人生で一番奮発した買い物
- ・人生最悪の忘れ物
- ・【コナン30周年】嘘でしょ!?と思った○○周年を教えて【ハルヒ20周年】
- ・ハマっている「お菓子」を教えて!
- ・最近、いつ泣きましたか?
- ・夏が終わったと感じる瞬間って、どんな時?
- ・10秒目をつむったら…
- ・人生のプチ美学を教えてください!!
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・都道府県穴埋めゲーム
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
ActiveXobjectが作成できない
-
onchangeイベントを使ってspan...
-
<a>タグのテキストを取得
-
問題はbind の付いたリスナーを...
-
JavaScriptでオブジェクトを取...
-
任意の座標をクリックさせるには
-
テキストボックスでリターン(En...
-
javascript 特定のタグのidの存...
-
onclickは良くないのですか
-
アンカータグをクリックして色...
-
クッキーを食べさせた会員には...
-
javascript
-
C#OpenCv V4にのエラーに関する...
-
google apps scriptの終了のさせ方
-
同じIDで定義した要素の配列を...
-
二次元配列を使って順位をだす...
-
idを使わずにonclickで自身の要...
-
翌月を取得するGASが分かりません
-
getElementByIdを使用したグロ...
-
クリッカブルマップのリンク部...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
ActiveXobjectが作成できない
-
<a>タグのテキストを取得
-
JavaScript を使ってpkゲームを...
-
任意の座標をクリックさせるには
-
onchangeイベントを使ってspan...
-
javascript 特定のタグのidの存...
-
javascriptでスロットゲームを...
-
重複しないくじの作り方がわか...
-
「nullまたはオブジェクトでは...
-
HTML:Tableタグに対し、JavaScr...
-
画像上のクリックした場所が分...
-
JavaScriptでオブジェクトを取...
-
【Tabキー】特定の範囲内だけで...
-
javascript の 命令文の記述で...
-
javascriptであるボタンを押す...
-
モーダルダイアログウィンドウ...
-
Click回数を数え、規定された回...
-
JavaScriptとcookieを利用して...
-
問題はbind の付いたリスナーを...
-
カレンダーを作るには
おすすめ情報