テキストボックスのグレーアウト

質問

こんにちわ、お世話になります。

JavaScriptで、必要項目が入力されるまでその後のテキストボックスを
グレーアウト表示にしたいのですが、どのようにしたらよいのでしょうか？
検索もかけてみたのですが、探し方が悪いのか見つけることができません。
どうかご教授お願い致します。

回答No.4

nobuoka

#2 です。 #3 も間違えていますねすみません・・・。
"disable" は正しくは "disabled" でした。

と訂正ばっかりだと申し訳ないのでサンプルページを作ってみましたので、参考 URL をご覧ください。
2 つの入力フォームがあり、1 つが必須項目、もう 1 つは非必須項目です。 必須項目が入力されていないとき非必須項目は入力不可状態 (Firefox 3.5 だとグレーアウト、IE 8 では見た目は変わりませんが入力できません) で、必須項目を入力すると非必須項目も入力できるようになります。
今回の例ですと、必須項目、非必須項目が共に 1 個だけですが、JavaScript をちょっと変更すると 2 個以上でもいけます。

動作テストは Firefox 3.5 と IE 8 でしかしていませんので、もしかしたら IE 7 以下などでは上手く動かないかもしれません。 その場合は適当に修正してください。

参考URL：

http://www.vividcode.info/wd/tec/sample/formcheck.xhtml

回答No.3

nobuoka

#2 です。 申し訳ありません、true と false が逆になっていました。 正しくは以下です。

・初期値は disable = false
・ページ読み込みが完了と同時に JavaScript で disable = true にする
・必須項目が入力されたら JavaScript で disable = false に戻す

回答No.2

nobuoka

#1 さんの回答に補足。

基本的な考え方は #1 さんの方法でいいですが、JavaScript が無効になっている場合、#1 さんの方法では disabled = false にすることができず、ずーっと入力不可能のままになってしまうという問題があります。 そんなわけで、

・初期値は disable = true
・ページ読み込みが完了と同時に JavaScript で disable = false にする
・必須項目が入力されたら JavaScript で disable = true に戻す

という方法にすれば良いと思います。 これだと JavaScript が無効の場合でも入力できない、ということはありませんし。 もちろん別の場所で入力チェックをする必要はありますが。

回答No.1

fujillin

<input type="text">のタグでいいのでしょうか？

初期値で disabled を指定しておけば、グレーアウトで編集不可の状態になります。
（何も値がないと、ブラウザによっては見かけは同じままですが）

入力を許可するときは、その要素に対して disabled = false とすれば、通常の入力可能状態になります。