テキスト入力の制御

質問

<input type="text" name="num" value="" />
<input type="checkbox" name="check" value="">

とテキストとチェックボックスがあるとします。
チェックボックスにチェックをした段階でページの切り替えなどを
しなくてもテキストのnumを入力できない状態にしたいのですが
どうすれば可能でしょうか？
可能であれば先にテキストを入力している段階でもチェックをすれば
入力してあるテキストを無効にし入力できない状態に切り替えたいと
思っております。

どちらかの入力を必須項目としエラーチェックはphpで行うのですが
javascriptで入力を制御する方法がわかりません。

回答No.3

yambejp · ベストアンサー

IEの場合disabledされたテキストボックスの文字色を変えることは
できませんので、背景色で調整ください

<script>
function setPrevDisable(obj){
var n=obj.previousSibling;
while(n){
if(n.nodeName=="INPUT" && n.type=="text") break;
n=n.previousSibling;
}
//n.value="";
n.disabled=obj.checked;
n.style.backgroundColor=obj.checked?"#c0c0c0":"#ffffff";
}
</script>
<form>
<input type="text" name="num" value="" />
<input type="checkbox" name="check" value="" onClick="setPrevDisable(this)">
</form>

お礼

お返事ありがとうございます。
背景色もjs側で制御できるのですね～参考になります。
おかげさまで解決できましたので締め切らせて頂きます。
わかりやすいご説明をして頂きありがとうございました！

回答No.2

yambejp

この場合、入力できないというのはデータを無効にするとの
認識でよろしいですね？
であれば、disabledがよろしいかと。
またチェックをしたときにテキストをクリアするのであれば
コメントアウトしてあるvalueに""を代入する行を有効にしてください

<script>
function setPrevDisable(obj){
var n=obj.previousSibling;
while(n){
if(n.nodeName=="INPUT" && n.type=="text") break;
n=n.previousSibling;
}
//n.value="";
n.disabled=obj.checked;
}
</script>
<form>
<input type="text" name="num" value="" />
<input type="checkbox" name="check" value="" onChange="setPrevDisable(this)">
</form>

お礼

早速のお返事ありがとうございます！
思うように動作させることができました＾＾
テキストを入力できるか否かをわかりやすくするために
チェックがついている場合はテキストの背景をグレーにするなど
安易に判別ができればいいかと思ったのですがどう変更すれば
いいいもでしょうか？

<input type="checkbox" name="check" value="" onChange="setPrevDisable('#666666')">
のように背景色を設定しjs側で背景の指定などを行うという
流れになるかとは思うのですが正解に結び付けません^^;

回答No.1

SAYKA

readonly にすれば良いんじゃないのかな
http://www.tohoho-web.com/html/input.htm
http://www.tohoho-web.com/js/form.htm

http://www.google.com/search?lr=lang_ja&q=javascript%20readonly