JS

ネイティブネタ帳

UI

モーダル

タブ

ドロワー

スライダー

スクロール

アコーディオン

目次

ローディングアニメーション

ツールチップ

ヘッダー

フォーム

フォーム

文字

文字の装飾

文字の操作

文字のカウント

数字の操作

ウィンドウ

ウィンドウ操作

タイトルの操作

ページ遷移時の動き

class

classの操作

要素

要素の操作

要素の追加

API

WP REST API

Google Books APIs

楽天市場API

画像・動画

画像の操作

YouTube

リンク

Google Analytics

cookie

検索

検索

お気に入り登録

JavaScriptの.addEventListenerのchangeイベントでチェックが付いたら送信可能になるボタン

お気に入り登録をすると、お気に入り記事一覧に登録することができます。

.addEventListener()

JavaScriptの.addEventListenerのchangeイベントでチェックが付いたら送信可能になるボタン

JavaScriptの.addEventListenerのchangeイベントでチェックが付いたら送信可能になるボタン

問い合わせや会員登録、資料請求などなどWebサイトで使われているフォーム。

そんなフォームで規約を同意してもらいたい場合に、「規約同意」のチェックが入ってはじめて送信が可能になるフォームを、JavaScriptを使い作ってみました。

.addEventListenerのchange

JavaScriptの.addEventListenerは、ターゲットに特定のイベントが発生する度に関数です。

.addEventListener(type, listener);

この記事では、イベントの種類を表す文字列は change です。change イベントは、フォームなど操作によって値が変更されたときに発生するイベントです。

チェックが付いたら有効になるボタンのサンプル

サンプルは全体感が分かるよう「会員登録」のフォームです。実際に何か登録できるものではない、モックです。

       

利用規約に同意の上、ご登録ください。

各項目の入力後、規約同意のチェックボックスでボタンが送信できるようになります。

サンプルのコード

コードは、HTML・JavaScript・CSSの3種です。順に解説していきます。

HTML

HTMLは、「ユーザID」「パスワード」「メールアドレス」の input 入力フィールドに、「利用規約に同意」のckeckbox 。そして、「登録ボタン」の5つです。

<div class="loginForm">
<form class="my_form" name="my_signup_form" id="my_signup_form" action="" method="post">
    <div class="formUsername">
        <label for="signup_user_name">ユーザID</label>
        <input id="signup_user_name" name="user_name" type="text" required="">
    </div>
    <div class="formUsername">
        <label for="signup_password">パスワード</label>
   <input id="signup_password" placeholder="半角英数字8文字以上" minlength="8" name="user_pass" type="password" required="">
    </div>
    <div class="formPassword">
        <label for="signup_email">メールアドレス</label>
        <input id="signup_email" name="user_email" type="email" required="">
    </div>
	<div class="contactAgree">
		<p>利用規約に同意の上、ご登録ください。</p>
		<input type="checkbox" id="termCheck" name="agree" value="agreement">
		<label for="termCheck" class="checkagree">利用規約に同意する</label>
	</div>
	<button id="submitButton" type="submit" name="my_submit" class="my_submit_btn" value="signup">メンバー登録</button>
</form>
</div>

チェックボックスのチェックの有無が、後述の .addEventListenerchange に連動して、button タグのclass名が変更になり、送信できるようになります。

JavaScript

JavaScriptの .addEventListener は2段階になっていて、まずはじめにHTMLの読み込みと解析が完了した時点で発動するイベントと、チェックボックスの状態が変わった時に発動するイベントの2種です。

// 同意でログインボタンON
document.addEventListener('DOMContentLoaded', function(event) {
  const targetButton = document.getElementById('submitButton');
  const triggerCheckbox = document.querySelector('input[name="agree"]');

  targetButton.disabled = true;
  targetButton.classList.add('is-inactive');

  triggerCheckbox.addEventListener('change', function() {
    if (this.checked) {
      targetButton.disabled = false;
      targetButton.classList.remove('is-inactive');
      targetButton.classList.add('is-active');
    } else {
      targetButton.disabled = true;
      targetButton.classList.remove('is-active');
      targetButton.classList.add('is-inactive');
    }
  }, false);
}, false);

DOMContentLoaded のイベントでは、button タグに disabled 属性と、is-inactive のclass名が付きます。そして、チェックボックスで発動するchange では、disabled 属性とclass名を変更する形で、表示が切り替わります。

CSS

CSSは、フォームの項目数字に応じた量です。

個人的に、標準ままのチェックボックスは小さく視認しづらいUIです。ので、class名「checkagree」をチェックボックスに付け、大きさも大きくし、チェックが入ると擬似要素で色味をつけて表示させています。

.loginForm {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    background: #FFF;
    padding: 25px 30px 25px;
    border-radius: 3px;
    box-shadow: 0 0 3px 0 rgb(0 0 0 / 12%), 0 1px 1px 0 rgb(0 0 0 / 11%);
    display: flex;
    flex-direction: column;
}
.loginForm img {
    display: block;
    width: 250px;
    margin: 10px auto 20px;
}
.formUsername {
    margin-bottom: 20px;
}
.formPassword {
    margin-bottom: 30px;
}
.formUsername input, .formPassword input {
    background: #FFF;
    border: solid 1px #aaa;
}
.loginForm button {
    width: 100%;
    display: block;
    background: #6bb6ff;
    line-height: 35px;
    border: none;
    color: #FFF;
    transition: 0.3s ease-in-out;
    font-weight: 600;
    overflow: hidden;
	position: relative;
}
.loginForm button:hover {
	opacity: 0.95;
}
.loginForm button:before{
content: '';
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: -100%;
    background-image: linear-gradient( 
130deg, rgba(255, 255, 255, 0) 25%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0) 55%);
    -webkit-transition: 0.5s;
    transition: 0.6s;
}
.loginForm button:hover:before {
    left: 100%;
}
button#submitButton.is-inactive {
    background: #ddd;
	pointer-events: none;
}

.contactAgree {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
	margin-bottom: 10px;
}

input[type=checkbox] {
    display: none;
}
.checkagree {
    box-sizing: border-box;
    cursor: pointer;
    display: inline-block;
    padding: 5px 32px;
    position: relative;
    width: auto;
}
.checkagree::before {
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 3px;
    content: '';
    display: block;
    height: 18px;
    left: 5px;
    margin-top: -10px;
    position: absolute;
    top: 50%;
    width: 18px;
}
.checkagree::after {
    border-right: 6px solid #f0db40;
    border-bottom: 3px solid #f0db40;
    content: '';
    display: block;
    height: 20px;
    left: 7px;
    margin-top: -18px;
    opacity: 0;
    position: absolute;
    top: 50%;
    transform: rotate(45deg) translate3d(0,2px,0) scale3d(.7,.7,1);
    transition: transform .2s ease-in-out, opacity .2s ease-in-out;
    width: 9px;
}
.contactAgree p {
    margin: 0;
    font-size: 0.8rem;
}
input[type=checkbox]:checked + .checkagree::before {
    border-color: #666;
}
input[type=checkbox]:checked + .checkagree::after {
    opacity: 1;
    transform: rotate(45deg) scale3d(1,1,1);
}

.memberResist {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 40px;
}
.memberResist p {
    margin: 0;
}
かかかず
かかかず

チェックボックスの見た目を変えるだけで、だいぶ印象が変わります。