
いつもお世話になっております。
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を見た人はこんなQ&Aも見ています
関連するカテゴリからQ&Aを探す
おすすめ情報
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
ActiveXobjectが作成できない
-
innerHTML実行後のイベント
-
配列の大括弧と丸括弧はどう違う?
-
javascriptでCSVを呼出しvlookup
-
JavaScriptとcookieを利用して...
-
IE8でdivのcontenteditable=tru...
-
appendChildがieだとできない??
-
クリックすると上に開くアコー...
-
C#OpenCv V4にのエラーに関する...
-
同じIDで定義した要素の配列を...
-
XMLでのAttributeを持ったNode...
-
functionから別のfunctionを実...
-
配列データの利用方法
-
jspからjavascriptの変数引継ぎ
-
JavaScriptで文字列の特定文字...
-
JavaScriptで簡単なクイズを作...
-
サブウインドウから親ウインド...
-
idを使わずにonclickで自身の要...
-
javaScript textareaの一行あた...
-
XMLHttpRequestでキャッシュを...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
ActiveXobjectが作成できない
-
<a>タグのテキストを取得
-
onchangeイベントを使ってspan...
-
javascriptで編集可能不可能の...
-
innerHTML実行後のイベント
-
javascriptの質問です
-
クリックでURLに飛ばすときに、...
-
ボタン上でマウスを押している...
-
別フレームのタグ属性を取得す...
-
DIV内のDIV要素を移動する。
-
HTML:Tableタグに対し、JavaScr...
-
任意の座標をクリックさせるには
-
お気に入り用のボタンを配置し...
-
1つの処理で複数表示させたい
-
WordPressのコンタクトフォーム...
-
指定した数値同士を合計計算し...
-
JavaScriptで文字列の置き換え
-
フォーカスを合わせる
-
div要素内の全input要素をdisable
-
[javascript]DOCTYPE宣言対応に...
おすすめ情報