ゆとり日記

心にゆとりを持って生きたいプログラマーの雑記です。気が向いたら書きます。

checkboxの値でbuttonの状態を切り替える

フォーム内のチェックボックスにチェックを入れると、ボタンが押せるようになる

Webページのフォームではありがちな画面の動きですね。仕事をしていると、度々この動作を実装する機会があるのですが・・その度にやり方を忘れて時間を無駄にしているので、簡単にメモしておきます。

実装は以下の通りです。

・checkbox.html

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <title>チェックボックスとボタンの連動</title>
   <link rel="stylesheet" href="">
</head>
<body>

    <label>
        <input id="check" type="checkbox" onclick="checkValue(this)">
        同意しますか？
    </label>

    <!-- 初期状態では押せないbutton -->
    <input id="btn" type="button" value="押せない" disabled="disabled">

    <script src="js/jquery-1.11.1.min.js"></script>
    <script type="text/javascript">

       /* buttonのdisable属性を書き換える */
       function checkValue(check){
           var btn = document.getElementById('btn');

           if (check.checked) {
               btn.value = '押せる';
               btn.removeAttribute('disabled');
           } else {
               btn.value = '押せない';
               btn.setAttribute('disabled', 'disabled');
           }
       }
   </script>
</body>
</html>

これでチェックボックスでボタンの状態を切り替える事が出来るようになりました。
動きを試したい方は、JSFIDDLEあたりでやってみてください。

thisって便利だなー（棒）