同意ボタンのチェックで送信ボタンを有効化させる
~ フォームデザインのカスタマイズ Vol.7 ~

こんにちは!
SDP運営事務局の二木です。今回は、個人情報の取り扱いに関する同意ボタンをチェックした後、JavaScriptで送信ボタンを有効化させる方法をご紹介します。

 DEMOはこちら ※“個人情報利用目的について”を参照ください。



1. HTMLの設定

データベースは、択一のセレクト(ラジオボタン)フィールドを選択します。
そしてフィールドのラベルは、今回、「同意します」のみ設定しています。

データベース設定の画像01

上のキャプチャの通り、IDはvalue値などを紐付ける役割があります。

では、デフォルトのHTMLは、どのように構成されているのか見ていきましょう!

<dl class="cf">
	<dt class="title">
		同意確認ボタン
	</dt>
	<dd class="data multi2">
		<ul class="radio cf">
			<li><label><input class="input" type="radio" name="●●●" value="1" $●●●:r1$><span>同意します</span></label></li>
		</ul>
		<input type="hidden" value="" name="●●●">
		<span class="msg">$error:●●●$</span>
	</dd>
</dl>

※●●●には、データベース構築の際、フィールド名ごとに設定した差替キーワードが入ります。

ソースの抜粋画像01

「$●●●:r1」とは、「ラジオボタン」で設定された、セレクトフィールドの「IDナンバー1」のことで、これは自動でhtmlに記載されます。

話が少し、それましたが、、

他の質問やフォームと同じように、dlで構成されていることがわかりました!
それでは、”個人情報利用目的について”の内容をdivで構成させていきましょう。
また、div内の下部には、同意ボタン=input要素など追記します。

<div class="privacy">
	<p class="privacy_ttl">個人情報の利用目的について</p>
	<div class="privacy_inner">
		<p>パイプド不動産(以下、「当社」という)は、個人情報を以下の目的に利用いたします。</p>
		<ol>
			<li>当社の不動産販売・仲介事業に関し、郵便による資料送付、電子メールによる情報提供、電話等による商品案内等の営業活動を行なうため。</li>
			<li>顧客動向分析もしくは商品開発等の調査分析のため。</li>
		</ol>
		<hr style=”width:500px”>
		<p>※詳細は当社、個人情報のお取り扱いについて<br>
			<a href="https://www.pi-pe.co.jp/company/management/privacy/" target="_blank">https://www.pi-pe.co.jp/company/management/privacy/</a>をご参照ください。</p>
		<p>消費者相談・苦情受付窓口</p>
		<table>
			<tr>
				<th>受付時間</th>
				<td>平日10:00~18:00(12/28~1/3を除く)</td>
			</tr>
			<tr>
				<th>TEL</th>
				<td>**-****-****</td>
			</tr>
		</table>
	<p>以上</p>
</div>
<p class="privacy_agreement">
	<label for="checkAgree" class="checkAgree">
	<input type="checkbox" name="●●●" id="checkAgree" value="1" $●●●:r1$ >
	<span style="margin-left:10px">同意します</span>
	</label>
</p>
<input type="hidden" value="" name="●●●">
<span class="msg" style="text-align: center;">$error:●●●$</span>
<input type="hidden" name="detect" value="判定">
</div><!-- .privacyここまで -->
<!-- HIDDEN_PARAM START -->
$form:hidden$
<!-- HIDDEN_PARAM END -->
<input class="submit" id="checkSubmit" type="submit" name="submit" value="確認する">

div class=”privacy”で囲まれた部分は、後ほどCSSでスクロール設定をします。


2. onClickイベントの設定

HTMLの下準備を終えたら、ocClickのイベントをinputタグに記述します。

onClick=”関数名();”

<p class="privacy_agreement">
	<label for="checkAgree" class="checkAgree">
	<input type="checkbox" name="●●●" id="checkAgree" value="1" $●●●:r1$ onclick="changeDisabled();">
	<span style="margin-left:10px">同意します</span>
	</label>
</p>


3. CSSの設定

divなどで囲まれたテキストをスクロールさせるには、overflowのスタイル設定を行います。

/*pc*/
.privacy {
width: 600px;
margin: 0 auto;
text-align: left;
}
.privacy_inner {
height: 200px;
overflow: auto;
padding: 10px;
background: #ddd;
margin-bottom: 20px;
}
.privacy_ttl{
margin-top: 20px;
font-size: 14px;
}
.privacy_agreement{
text-align: center;
}
#SMP_STYLE label.checkAgree{
padding: 8px 20px;
border: solid 2px #c3fa71;
font-size: 1.5em
}
/*タブレット*/
.privacy {
width: 100%;
margin: 0 auto;
text-align: left;
}
.privacy_inner {
height: 200px;
overflow: auto;
padding: 10px;
background: #ddd;
margin-bottom: 20px;
}
.privacy_ttl{
margin-top: 20px;
font-size: 14px;
}
.privacy_agreement{
text-align: center;
}
#SMP_STYLE label.checkAgree{
padding: 8px 20px;
border: solid 2px #c3fa71;
font-size: 1.5em
}
/*スマートフォン*/
.privacy {
width: 100%;
margin: 0 auto;
text-align: left;
}
.privacy_inner {
height: 200px;
overflow: auto;
overflow-x: hidden;
padding: 10px;
background: #ddd;
margin-bottom: 20px;
}
.privacy_ttl{
margin-top: 20px;
font-size: 14px;
}
.privacy_agreement{
text-align: center;
}
#SMP_STYLE label.checkAgree{
padding: 8px 20px;
border: solid 2px #c3fa71;
font-size: 1.5em
}

4. JavaScriptの設定

そして最後に、JavaScriptの設定を行いましょう!

//チェックボックスをチェックすると「確認する」ボタンがアクティブになる
function changeDisabled(){
	checkbox = document.getElementsByName('●●●')
	if(checkAgree.checked) {
	document.getElementById('checkSubmit').disabled = "";
	document.getElementById('checkSubmit').style.background = "#15700c";
}
else {
	document.getElementById('checkSubmit').style.background = "#c1c1c1";
	document.getElementById('checkSubmit').disabled = "disabled";
}
}
window.onload = changeDisabled;

window.onloadを複数設定する場合、window.onloadはまとめて最後尾に記述してください。
まとめずfunctionごとに記述したら、JavaScriptの処理が行われませんので気をつけてくださいね!

カスタマイズ後

個人情報取り扱い説明と同意ボタンの画像