【JavaScript】特定のチェックボックスがチェックされている場合にのみボタンをアクティブにする方法

Webアプリケーションやフォームでよく見られる機能の一つに、チェックボックスによってボタンのアクティブ状態を制御するものがあります。例えば、利用規約に同意するためのチェックボックスがあり、それがチェックされた場合のみ「次へ」ボタンが押せるようにする、といったケースです。

この記事では、そのような機能をJavaScriptを使って簡単に実装する方法をご紹介します。

必要な知識
実装手順
1. Step 1: HTMLの準備
2. Step 2: JavaScriptでの制御
まとめ

必要な知識

基本的なHTMLの知識
基本的なJavaScriptの知識

実装手順

Step 1: HTMLの準備

まずは、HTMLでチェックボックスとボタンの要素を作成します。

<!DOCTYPE html>
<html>
<head>
  <title>Checkbox Example</title>
</head>
<body>

  <input type="checkbox" id="myCheckbox">
  <button id="myButton" disabled>Click Me</button>

</body>
</html>

この例では、<input type=”checkbox”>でチェックボックスを、<button>でボタンを作成しています。また、ボタンには初めからdisabled属性を設定して、非アクティブ状態にしています。

Step 2: JavaScriptでの制御

次に、JavaScriptを使ってチェックボックスの状態に応じてボタンを制御します。

// ページが読み込まれたら実行
document.addEventListener("DOMContentLoaded", function() {
  // チェックボックスとボタンの要素を取得
  const checkbox = document.getElementById("myCheckbox");
  const button = document.getElementById("myButton");

  // チェックボックスの状態が変わったら実行
  checkbox.addEventListener("change", function() {
    // チェックボックスがチェックされているかどうかでボタンのdisabled属性を設定
    button.disabled = !checkbox.checked;
  });
});

このコードでは、DOMContentLoaded イベントを使ってページが完全に読み込まれた後にスクリプトが実行されるようにしています。そして、changeイベントを使ってチェックボックスの状態が変わるたびにボタンのdisabled属性を更新しています。

まとめ

以上が、チェックボックスの状態によってボタンをアクティブまたは非アクティブにする簡単な方法です。このような小さな機能でも、ユーザーエクスペリエンスに大きな影響を与えることがありますので、ぜひ実装してみてください。