- ベストアンサー
複数対応できるチェックボックスONでのテキストフィールド有効化
- JavaScriptを使用して、複数のチェックボックスに対応し、選択されたチェックボックスに対応するテキストフィールドを有効化する方法を模索しています。
- しかし、オブジェクトでサポートされていないというエラーメッセージが表示されます。
- 問題の原因としては、[getElementById]メソッドを使用してフォーム要素にアクセスする際に、正しい構文を使用していない可能性があります。
- rollbahn
- お礼率37% (6/16)
- JavaScript
- 回答数3
- ありがとう数1
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
今回の問題は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>
その他の回答 (2)
<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時に両方実行しているのですが、エラーが出て動作しません。 こちらも単独では動作するのですが・・・。 ぜひアドバイスをどうぞ宜しくお願いいたします。
- yambejp
- ベストアンサー率51% (3827/7415)
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>
お礼
早速ありがとうございました！ 注意力がないことを痛感いたしました・・・。 一呼吸置いて見直してから投稿するようにします。 上記コード参考になりました。ただエラーがでてしまったので、 アドバイスのとおり下記のようにしてみました。 この度は大変助かりました！！！ありがとうございました。 <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>