【コピペで使える】チェックの有無でボタンが有効／無効に切り替わるJavaScriptコードサンプル（利用規約への同意等）
tasan今回簡易的な利用規約の同意機能として、同意するにチェックを押したときだけ登録ボタンを押すことができる処理を実装したのでそのコードをシェアします。
本来であれば同意したかどうかは会員データベースに記録したり、メール本文に出力するのがよいので、あくまでも簡易的な手段として認識頂ければと思います。
JQueryベースでの実装になるとクライアントのウェブサイトにJQueryが導入されているかどうかに依存してしまうため、ここではプレーンなJavascriptでの実装としています。
実装方法
HTML部
<form name="signup"> <p><input type="checkbox" id="doui" name="doui" onclick="checkDoui()" /> 利用規約に同意する</p> <p><button id="regist" name="regist" class="regist-off" disabled />登録する</button></p> </form>
応用しやすいよう同意チェックと登録ボタンだけのシンプルな内容にしています。
JS部
<script><!--
window.onload = function(){
checkDoui();
}
function checkDoui(){
var regist = document.getElementById('regist');
if(document.signup.doui.checked){
document.signup.regist.disabled = false;
document.signup.regist.className = 'regist-on';
} else {
document.signup.regist.disabled = true;
document.signup.regist.className = 'regist-off';
}
}
--></script>
同意チェックされていればボタンを有効化、いなければ無効化するというシンプルな処理です。ページ読み込み時のボタン状態を確定するために初回一回だけ関数を実行しています。
CSSのクラス名を動的に付与しているのはボタンの有効状態を視覚的にわかりやすくするために背景色を変えているためです。（なくても機能はします）
CSS部
<style><!--
.regist-on {
background:orange;
}
.regist-off {
background:gray;
}
--></style>
ボタンが有効なときはオレンジ、無効のときはグレーにするように設定しています。
まとめ
いかがでしたか？多くの環境でコピペだけで機能するコードと思いますので、簡易的な同意チェックを組み込みたい場合には是非ご活用頂ければと思います。
Follow me!
