• ベストアンサー

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が定義されていないというようなエラーメッセージが表示されて、 うまくいきませんでした。 以上の件を、ご教授お願いします。

質問者が選んだベストアンサー

  • ベストアンサー
  • leap_day
  • ベストアンサー率60% (338/561)
回答No.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』を指定）

iec1128
質問者

お礼

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

その他の回答 (1)

  • HIRSYU
  • ベストアンサー率51% (45/87)
回答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>

iec1128
質問者

お礼

ご回答ありがとうございました。 希望のものを作ることができました。 これを応用していけばいろいろな状況に対応できそうです。 ありがとうございました。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • Javascript; フィールドの属性変更

    作成したフォームに対してJavaScriptでの処理を行おうとしています。 セットした社名やDB検索した値の属性変更をしたいのですが、下記エラーが表示されます。 どのような対策がございますか? SCRIPT5007: プロパティ 'readOnly' の値を設定できません: オブジェクトは Null または未定義です。 SCRIPT5007: プロパティ 'onchange' の値を設定できません: オブジェクトは Null または未定義です。 下記のJavaScriptでの処理を行おうとしています。 function SetEvent() { document.getElementById("CompanyTextBox").readOnly="readonly"; 　//ここで、エラーになります。 //DB検索処理........ //配列 var counter = 0; var code = new Array(); for (var i = 0; i <10; i++) { code[i] = new Array(); code[i][0] = 'TextBox' + ((i * 4) + 1); code[i][1] = 'TextBox' + ((i * 4) + 2); document.getElementById(code[i][1]).readOnly="readonly"; //ここで、エラーになります。 } //検索結果のセット do { var elem = document.getElementById(code[counter][0]); elem.onchange = function(event) //ここで、エラーになります。 ・ ・ counter++; } while(counter < 10) }

  • JavaScriptの論理演算子について

    JavaScriptの論理演算子について質問です。 「alert(e.target||e.srcElement);」の結果がtrue かfalseではなくて「object HTMLHtmlElement」となるのは何故なのでしょうか？ JavaScriptでは"||"は論理演算子ではないのでしょうか？ ----------------------------------------------------------------------- <body> <a id="id1">Textarea</a> <script> (function () { 　 var i = document.getElementById ("id1"); 　 document.addEventListener("dblclick", addEL, false); 　 function addEL (e) { alert(e.target||e.srcElement); 　 } }) (); </script> </body>

  • JavaScriptのイベントについて

    JavaScriptを使ってページのウィンドウ上でダブルクリックをした時 テキスト1の文字列を変更するようにしたいのですが、 下記のページを読み込むとページがロードすると同時に テキスト部分が変更されてしまいます。 addEventListenerの使い方が間違えているのでしょうか。 よろしくお願いいたします。 ---------------------------------------------------------------------- <body> <a id=id1>テキスト1</a> <script> i = document.getElementById("id1"); document.addEventListener("dblclick", addEL(), !1); function addEL(){ i.innerHTML="addEventListener!"; } </script> </body>

  • javascript　バーコード読み取りについて

    バーコードを読み込んだ際に、重量だけ表示させたいので自分で考えてソースコードを書きましたが、実行されません。 下記のコードの何処を直せばいいかわかりません。教えてください。 <!DOCTYPE html> <html> <head> <title></title> <script type="text/javascript"> var textbox = document.getElementById("barcode"); function extract() { var textbox2 = document.getElementById("toridasi"); if(textbox.value !== null) { if (textbox.value.length > 47) { var amount = textbox.value.substr(22,3); textbox2.value =amount/10; } } } textbox.onchange = extract(); </script> </head> <body> バーコード: <input type="text" id="barcode" size="64" value="1"> <input type="button" value="部分取り出し" onclick="extract()"> <input type="text" id="toridasi" size="10" value=""> </body> </html>

    • ベストアンサー
    • HTML
  • JavaScript表示切替の問題

    ボタンを押すたびに、こんにちはとこんばんはが切り替わるようにしたいのですが、 切り替わりません。なぜかわかる方がいたら教えて頂けると助かります。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> </head> <body> <div id="1">こんにちは</div> <input type="button" value="切替" onclick="func_switch()"> <script language="javascript" type="text/javascript"> function func_switch(){ if(document.getElementById(1).innerHTML="こんにちは"){ document.getElementById(1).innerHTML="こんばんは"; } else{ document.getElementById(1).innerHTML="こんばんは"; } } </script> </body> </html>

  • javascript 書き方について(バーコード)

    精肉会社で働いています。 在庫管理をタブレットを使い管理できるようにしたいと思っています。 プログラムを少しだけ覚えていたのでコードを書いています。 HTMLでフォームを書いて、バーコードスキャナーで下記のバーコードを読み取り、必要なところだけ（重量）表示するプログラムを書いていますが、うまくいきません。 どうすればいいのかわかりません。 教えてください。 下記はソースコードです。 <!DOCTYPE html> <html> <head> <title></title> <script type="text/javascript"> const textbox = document.getElementById("message") var sugi=String(textbox); var message1=sugi.substr(14,17); </script> </head> <body> <input type="text" id="message" id="message1" type="text"> </body> </html>

  • javascriptバーコードについて

    <!DOCTYPE html> <html> <head> <title></title> </head> <body> バーコード: <input type="text" id="barcode" size="64" value="1234567890abcdefghijklmnopqrstuvwxyz"> </body> <script type="text/javascript"> var textbox = document.getElementById("barcode"); var amount = textbox.value.substr(22,3); textbox.value = amount; </script> </html> 上記のプログラムで何度やってもわからないので再度教えてください。※value="1234567890abcdefghijklmnopqrstuvwxyz valueの中の値は無いものとします。 バーコードリーダーでバーコードを読み込んだ時に、重量だけ表示させたいのですが、ボタンを押すと（textbox.value.substr(22,3)）必要な値が表示されますが、ボタンを押さずに表示をさせたいです。 やはりjavascriptはダメでしょうか？ 他の言語も考えていますが、VBも視野にいれてますがとりあえずjavascript、phpを使う予定です。 是非お願いいたします。

    • ベストアンサー
    • Ruby
  • javascript関数について

    <!DOCTYPE html> <html> <head> <title></title> <script type="text/javascript"> function extract() { var textbox = document.getElementById("barcode"); var amount = textbox.value.substr(22,3); textbox.value = amount; } </script> </head> <body> バーコード: <input type="text" id="barcode" size="64" value=""> <input type="button" value="部分取り出し" onclick="extract()"> </body> </html> 上記のソースコードでボタンを押せば22行目(先頭から数えて21番目までを削除？し22番目から25番目までを表示）するプログラムをかきましたが、ボタンを押さず表示したいのですが、どうすればいいですか？教えてください。 お願いいたします。

  • javascriptで困っています

    スマホでタッチした場所の座標を取得しようとしているのですが、いろいろ調べて以下のように作ってみましたが、座標が取得できません。どこを直せばいいのか、教えていただきたく投稿させていただきました。よろしくお願いします。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"/> <meta name="viewport" content="width=320, user-scalable=no" /> <script type="text/javascript" charset="utf-8"> var touch_box = document.getElementById("box"); touch_box.addEventListener("touchstart", function(e){ document.getElementById("txt0").innerHTML = "スタート"; document.getElementById("txt1").innerHTML = e.pageX; document.getElementById("txt2").innerHTML = e.pageY; }, false); touch_box.addEventListener("touchmove", function(e){ document.getElementById("txt0").innerHTML = "ムーブ"; document.getElementById("txt1").innerHTML = e.pageX; document.getElementById("txt2").innerHTML = e.pageY; }, false); touch_box.addEventListener("touchend", function(e){ document.getElementById("txt0").innerHTML = "エンド"; document.getElementById("txt1").innerHTML = e.pageX; document.getElementById("txt2").innerHTML = e.pageY; }, false); </script> </head> <body> <div id="box"> <span id="txt0"></span><br /> X:<span id="txt1"></span>, Y:<span id="txt2"></span><br /> </div> </body> </html>

  • VBSからjavascript

    下記ソースの指定の箇所からjavascriptのfunction fun1(1)をよびたいのですがどう記述したらいいでしょうか。 （ちなみにbody onload=は使わない条件です） <%@ LANGUAGE = VBSCRIPT %> <html> <head> <script type="text/javascript"> <!-- //禁止、許可 function fun1(is){ var is; var i; var jj; jj=document.form1.text2.length; for (i=0;i<jj;i++){ if (is==1) document.form1.text2[i].disabled=true; if (is==2) document.form1.text2[i].disabled=false; } } //--> </script> </head> <html> <body> <form name="form1"> <input type="text" name="text2" size="14" maxlength="8" value="ABC"> <input type="text" name="text2" size="14" maxlength="8" value="DEF"> <% <-------------------ここでfun1(1)をよびたい fun(1)と書いてもエラー >% </form> </body> </html>

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する