javascriptで編集可能不可能の切り替え

Question

いつもお世話になっております。
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が定義されていないというようなエラーメッセージが表示されて、
うまくいきませんでした。

以上の件を、ご教授お願いします。

leap_day · Accepted Answer

こんにちは単品、複数、a～bまで　どれか分からなかったので一応単品、複数両方載せときます（一応『複数に対して』とあるので複数だとは思いますが、スクリプトサンプルを見ると数字にあわせたtextboxをreadonly=false;にするのかなと思ったりもして・・・）あとidを数字からはじめるのはＮＧになります【単品】以下 id="b100" まで【複数】 ※デフォルトのreadonlyが逆であるならのreadonlyを消して obj = document.getElementsByTagName("input"); for(i=0;i 0 && tmp < 101) { の下に入れてください ※if(tmp > 0 && tmp < 101)の数値【101】は単品の場合はid="b100"まで作る予定(?)なので101にしてます(idの数を指定）複数の場合はclassの数を指定してください（class="b5"まで分けるなら『6』を指定）

HIRSYU · Answer

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>

javascriptで編集可能不可能の切り替え

こんにちは

id="textboxArea"のタグの中にある全てのテキストボックスのreadOnlyを変更するサンプル。

このQ&Aを見た人はこんなQ&Aも見ています

関連するカテゴリからQ&Aを探す

このQ&Aを見た人がよく見るQ&A

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング