Javascriptを埋め込む際の注意事項

以前、ASP.NETでJavascriptを使いたいときにどうするかを調べましたが、今回はJavascriptで画面上の部品にアクセスしたいときのやり方です。

やりたいこと: チェックボックスのon/offでテキストボックスの編集可否を切り替える。

HTMLの場合

参考：チェックボックスでテキストボックスの有効、無効を切り替えます - JavaScript スタイルシートサンプル集

<SCRIPT language="JavaScript">
<!--
function chk(){
  if (document.form_name.checkbox_name.checked){　//checked チェックが入っていたら
      document.form_name.textbox_name.disabled = true; // 入力不可, 無効化
  } else {
      document.form_name.textbox_name.disabled = false; // 入力可能,有効化
  }
}
// -->
</SCRIPT>

※form_nameはformタグに指定したname、checkbox_nameはチェックボックスに指定したname、textbox_nameはテキストボックスに指定したnameとします。

ASP.NETでマスターページを使っている場合、上記のソースを記述してもうまくいきません。なぜなら、ASP.NETが出力するHTMLは、テキストボックスやチェックボックスといったコンポーネントに自動でnameを設定してしまうからです。

解決策

ASP.NETが（勝手に）設定するnameには命名規則があるようです。

マスターページを使っている場合

form: aspnetForm
その他のコンポーネント: ctl00*1$ContentPlaceHolderのid$コンポーネントのid

マスターページを使っていない場合はコンポーネントに設定したidがそのままHTMLに吐かれるようです。結局ブラウザで表示させてみて、HTMLソースを見て確かめないと駄目ですね。

*1:ctl00が何をあらわしているかは不明。。