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

解決済

質問者：iec1128
質問日時：2008/03/24 22:36
回答数：2件

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

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

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

ベストアンサー優先
最新から表示
回答順に表示

No.2ベストアンサー

回答者： leap_day
回答日時：2008/03/24 23:55

こんにちは

単品、複数、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
- 件

通報する

この回答へのお礼

ご回答ありがとうございます。
状況に応じて、複数のサンプルを提示していただき本当に
感謝しております。
これらをうまく応用できるようこれからも学んで生きたいと思います。

通報する

お礼日時：2008/03/26 21:55

No.1

回答者： HIRSYU
回答日時：2008/03/24 22:55

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>