複数対応できるチェックボックスONでのテキストフィールド有効化

解決済

質問者：rollbahn
質問日時：2009/01/20 22:00
回答数：3件

nameでなくidから値を取得する方法を模索中です。
下記のようにしてみましたが、
「オブジェクトでサポートされていない～」とでます。
どのあたりに問題がありますでしょうか？

<script type="text/javascript">
function fchk(obj,id) {
var frm=obj.form;
if(obj.checked==true) {
/* テキストボックスを有効化（false）*/
for(var i=1; i<=2; i++){
frm.getElementById("t"+i).disabled=false;
}
} else {
for(var i=1; i<=2; i++){
/* 無効化する前に、入力値をクリア */
if(id=='t'){
frm.getElementById("t"+i).value="";
}
/* 無効化（true） */
frm.getElementById("t"+i).disabled=true;
}
}
}
</script>

<form name="form" action="#">
<input type="checkbox" id="c1" name="aaa" value="オン" onclick="fchk(this,'t')" />
<br />
<input type="text" name="aaa" id="t1" value="" size="20" disabled/>
<input type="text" name="aaa" id="t2" value="" size="20" disabled/>
</form>

通報する

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

質問の本文を隠す

回答 (3件)

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

No.3ベストアンサー

回答者： yambejp
回答日時：2009/01/21 12:47

今回の問題は3点

1)maparea = document.getElementById('mapitem').style;
とありますが、mapitemというidのオブジェクトがありません。
typoだと思います

2)宣言時点でmapitemにアクセスできません
この手の処理はページを読み終わってから処理するよう、window.onloadを
設定するか、function化するのが妥当です。

3)元ソースはスタティックにt1,t2をチェックしているのに
今回はt2が省略されています。このままだとt2をチェックしたとき
にエラーになります。

総じてこんな風にすると動きます。
<html>
<body>
<script type="text/javascript">
window.onload=function(){
maparea = document.getElementById('maparea').style;
}
function fchk(obj,id) {
for(var i=1; i<=2; i++){
if(!obj.checked) document.getElementById(id+i).value="";
document.getElementById(id+i).disabled=!obj.checked;
}
}
</script>
<form action="#">
<p>
地図挿入の場合チェック<input type="checkbox" id="c1" name="aaa" value="オン" onClick="fchk(this,'t');maparea.display=(this.checked?'':'none')" />
<br />
住所1：<input type="text" name="aaa" id="t1" value="" size="20" disabled/><br />
住所2：<input type="text" name="bbb" id="t2" value="" size="20" disabled/>
</p>
<div id="maparea" style="display:none;">
地図が出ます。
</div>
</form>
</body>
</html>

- 0
- 件

通報する

この回答へのお礼

早速ありがとうございました！
注意力がないことを痛感いたしました・・・。
一呼吸置いて見直してから投稿するようにします。

上記コード参考になりました。ただエラーがでてしまったので、
アドバイスのとおり下記のようにしてみました。
この度は大変助かりました！！！ありがとうございました。

<html>
<body>
<script type="text/javascript">
function maparea(){
maparea = document.getElementById('maparea').style;
}
function fchk(obj,id) {
for(var i=1; i<=2; i++){
if(!obj.checked) document.getElementById(id+i).value="";
document.getElementById(id+i).disabled=!obj.checked;
}
}
</script>
<form action="#">
<p>
地図挿入の場合チェック<input type="checkbox" id="c1" name="aaa" value="オン" onClick="fchk(this,'t');maparea.display=(this.checked?'':'none')" />
<br />
住所1：<input type="text" name="aaa" id="t1" value="" size="20" disabled/><br />
住所2：<input type="text" name="bbb" id="t2" value="" size="20" disabled/>
</p>
<div id="maparea" style="display:none;">
地図が出ます。
</div>
</form>
</body>
</html>

通報する

お礼日時：2009/01/21 13:58

No.2

回答者： _pipi_
回答日時：2009/01/20 22:56

<script type="text/javascript">

function fchk() {
var o, a = Array.prototype.slice.call(arguments);
var v=(a.shift()).checked,f=a.shift();
while (o=document.getElementById(a.shift())) {
o.disabled = !v;
if(f) o.value ='';
}
}
</script>

<form name="form" action="#">
<p>
<input type="checkbox" id="c1" name="aaa" value="オン" onclick="fchk(this,true,'t1','t2')" />
<br />
<input type="text" name="aaa" id="t1" value="12" size="20" disabled/>
<input type="text" name="aaa" id="t2" value="12" size="20" disabled/>
</p>
<p>
<input type="checkbox" id="c2" name="bbb" value="オン" onclick="fchk(this,false,'u1','u2','u3')" />
<br />
<input type="text" name="bbb" id="u1" value="12" size="20" disabled/>
<input type="text" name="bbb" id="u2" value="12" size="20" disabled/>
<input type="text" name="bbb" id="u3" value="12" size="20" disabled/>
</p>
</form>

この回答への補足

ご回答ありがとうございました。
このようなやり方もあるのですね。勉強になります。
回答No1の方の補足にもあるとおり、
今回この動作はID指定でエリアの非表示も同時に行っております。
onClick時に両方実行しているのですが、エラーが出て動作しません。
こちらも単独では動作するのですが・・・。
ぜひアドバイスをどうぞ宜しくお願いいたします。

補足日時：2009/01/21 10:30

通報する

- 0
- 件

通報する

No.1

回答者： yambejp
回答日時：2009/01/20 22:29

getElementByIdはフォームではなくdocumentのメソッドですね

なんかだいぶ冗長ですしこんな感じでどうでしょう？

<script type="text/javascript">
function fchk(obj,id) {
for(var i=1; i<=2; i++){
if(!obj.checked) document.getElementById(id+i).value="";
document.getElementById(id+i).disabled=!obj.checked;
}
}
</script>

<form action="#">
<input type="checkbox" id="c1" name="aaa" value="オン" onclick="fchk(this,'t')" />
<br />
<input type="text" name="aaa" id="t1" value="" size="20" disabled/>
<input type="text" name="aaa" id="t2" value="" size="20" disabled/>
</form>

この回答への補足

早い回答ありがとうございました。簡潔でとても美しいです。
しかし、もう一つ問題がありまして、今回この動作は
ID指定でエリアの非表示も同時に行っております。
この場合、onClick時に両方実行しているのですが、
エラーが出て動作しません。単独では動作するのですが・・・。
ぜひアドバイスいただけますでしょうか？

</html>
<body>
<script type="text/javascript">
//地図ありにチェックをいれたらマップアイテムを表示
maparea = document.getElementById('mapitem').style;
//地図ありにチェックをいれたら住所入力可能
function fchk(obj,id) {
for(var i=1; i<=2; i++){
if(!obj.checked) document.getElementById(id+i).value="";
document.getElementById(id+i).disabled=!obj.checked;
}
}
</script>
<form action="#">
地図挿入の場合チェック<input type="checkbox" id="c1" name="aaa" value="オン" onClick="fchk(this,'t');maparea.display=(this.checked?'':'none')" />
<br />
住所：<input type="text" name="aaa" id="t1" value="" size="20" disabled/>
<div id="maparea" style="display:none;">
地図が出ます。
</div>
</form>
</body>
</html>