はじめに: Webページにおけるユーザーインタラクションの中で、特定の条件下でアクションを制限したり許可したりすることは非常に一般的です。例えば、利用規約に同意する、または特定の選択肢をすべて選択するまでフォームの送信ボタンをロックするなどがあります。今回は、すべてのチェックボックスが選択された時に、ページ上の「ロックされた」ボタンを「アンロック」するJavaScriptの実装方法について説明します。

実装の概要: この機能は、チェックボックスが全てチェックされているかどうかを監視し、その状態に応じてボタンのクラスを切り替えることでロックの状態をコントロールします。以下のステップに沿って実装を進めます。

  1. HTMLのチェックボックスを準備
  2. ロックを解除するボタンを準備
  3. JavaScriptでチェックボックスの状態を監視
  4. 全てのチェックボックスが選択されたらボタンのロックを解除

HTMLの準備: まず、ユーザーに表示されるチェックボックスとロックされたボタンを準備します。


<div class="d-contents">
  <input class="checkkey" type="checkbox" name="checkkey">
</div>


<div class="dept-tmntP03A-Moveon">
  <div class="department__container mx-auto ta-center">
    <a class="button is-solided is-moveon bdrs-0 is-locked" href="#">解約のお申込み</a>
  </div>
  <!-- 他のロックされたボタンがある場合も同様に追加 -->
</div>

JavaScriptの実装: 次に、以下のJavaScriptコードを使用してチェックボックスの状態を監視し、全て選択された場合にボタンのロックを解除します。


// チェックボックスの状態を監視する関数
function checkCheckboxes() {
  const checkboxes = document.querySelectorAll('.checkkey');
  const lockedElements = document.querySelectorAll('.is-locked');
  const allChecked = Array.from(checkboxes).every(checkbox => checkbox.checked);

  lockedElements.forEach(element => {
    element.classList.toggle('is-locked', !allChecked);
    element.classList.toggle('is-unlocked', allChecked);
  });
}

// チェックボックスの変更を監視
document.querySelectorAll('.checkkey').forEach(checkbox => {
  checkbox.addEventListener('change', checkCheckboxes);
});

// ページ読み込み時に状態を確認
document.addEventListener('DOMContentLoaded', checkCheckboxes);

ポイント:

  • querySelectorAllを使用して、特定のクラスを持つ要素をすべて選択します。
  • Array.prototype.everyメソッドを利用して全てのチェックボックスがチェックされているかを評価します。
  • classList.toggleを使用してクラスを追加または削除し、ボタンの状態を更新します。
  • DOMContentLoadedイベントを使用して、ページが読み込まれたときに初期状態をチェックします。

結論: この簡単な実装により、ユーザーがすべてのチェックボックスに同意したことを確認し、次のアクションへ進むためのボタンをアンロックすることができます。ユーザビリティとセキュリティの両方を強化するために、このようなインタラクションはウェブページにおいて有効なアプローチです。