パーツ番号 04-03-07 ・ JavaScript使用

同意チェックで送信ボタン活性化

チェックボックスにチェックが入るまで送信ボタンがグレーアウトして押せません。Contact Form 7の個人情報同意フローで誤送信を防ぎたい場合に使えます。

clickjsinput

プレビュー

ソースコード

HTML

<div class="d04-03-07-wrap">
          <label class="d04-03-07-agree">
            <input type="checkbox">
            <span>プライバシーポリシーに同意する</span>
          </label>
          <button type="button" class="d04-03-07-submit" disabled>送信する</button>
        </div>

CSS

.d04-03-07-wrap{width:min(280px,100%);text-align:center}
        .d04-03-07-agree{
          display:flex;align-items:center;gap:8px;justify-content:center;
          font-size:13px;color:#444;cursor:pointer;margin-bottom:16px;user-select:none;
        }
        .d04-03-07-submit{
          width:100%;padding:12px;font-size:14px;font-weight:700;color:#fff;
          background:#c3c9d4;border:none;border-radius:8px;cursor:not-allowed;
          transition:background .25s;
        }
        .d04-03-07-submit.is-active{background:#4a6cf7;cursor:pointer}
        .d04-03-07-submit.is-active:hover{background:#3a58d6}

JavaScript

(function(){
        var wrap=document.querySelector('.d04-03-07-wrap');
        if(!wrap)return;
        var chk=wrap.querySelector('.d04-03-07-agree input');
        var btn=wrap.querySelector('.d04-03-07-submit');
        chk.addEventListener('change',function(){
          btn.disabled=!chk.checked;
          btn.classList.toggle('is-active',chk.checked);
        });
        btn.addEventListener('click',function(e){
          e.preventDefault();
        });
      })();

クラス名 .d04-03-07 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。