JavaScriptでチェックボックスが選択された場合にボタンを有効化する方法

方法1: イベントハンドラを使用する方法

HTMLのチェックボックスとボタンには、それぞれ一意のIDを割り当てます。

<input type="checkbox" id="myCheckbox">
<button id="myButton" disabled>ボタン</button>

次に、JavaScriptでイベントハンドラを設定します。チェックボックスの状態が変更されたときに、ボタンの有効/無効を切り替えます。

const checkbox = document.getElementById("myCheckbox");
const button = document.getElementById("myButton");
checkbox.addEventListener("change", function() {
  if (checkbox.checked) {
    button.disabled = false;
  } else {
    button.disabled = true;
  }
});

上記のコードでは、change イベントが発生したときに、チェックボックスの状態を確認し、ボタンの disabled プロパティを切り替えています。

方法2: 状態の監視を使用する方法

別の方法として、MutationObserver を使用してチェックボックスの状態を監視し、変更があった場合にボタンの有効/無効を切り替える方法もあります。

const checkbox = document.getElementById("myCheckbox");
const button = document.getElementById("myButton");
const observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    if (mutation.type === "attributes" && mutation.attributeName === "checked") {
      if (checkbox.checked) {
        button.disabled = false;
      } else {
        button.disabled = true;
      }
    }
  });
});
observer.observe(checkbox, { attributes: true });

上記のコードでは、MutationObserver を使用してチェックボックスの属性変更を監視し、checked 属性が変更された場合にボタンの disabled プロパティを切り替えています。

以上の方法を使用することで、チェックボックスが選択されたときにボタンを有効化することができます。選択されていない場合は、ボタンが無効になります。これにより、ユーザーがチェックボックスの状態に応じてボタンを制御できるようになります。