チェックボックスをチェックしてテキストフィールドを無効化

ホーム > お知らせ&トピックス > ウェブデザイン > チェックボックスをチェックしてテキストフィールドを無効化

チェックボックスをチェックしてテキストフィールドを無効化

2009-04-16 | ウェブデザイン

チェックボックスをチェックするとテキストボックスが有効化というのはあると思いますが、その逆です。
排他的な選択条件でチェックボックスによる値が最優先される場合に使います。（使いました。）
ちなみに下のソースではテキストフィールドのボーダーをインラインスタイルで設定し、カスタマイズしたときになってしまうシャドウチックな雰囲気を回避しています。

<script language="JavaScript" type="text/javascript">
<!--
function chk(){
  if (document.form1.cBox.checked){
      document.form1.tBox.disabled = true;
      document.form1.tBox.style.background = "#cccccc";
             }
  else{
 document.form1.tBox.disabled = false;
 document.form1.tBox.style.background = "#ffffff";
       }
   }
// -->
</script>

<form name="form1" id="form1">
<input type="text" name="tBox" size="70" value="チェックを入れると無効になります。"
 style="border:1px solid #999;" /><br />
<input name="cBox" type="checkbox" onclick="chk()" />
</form>

▲ページの先頭へ

まずはお気軽にご相談ください。