【JavaScript】disabledプロパティを使ってボタンの有効・無効の状態を切り替える方法

Webページのフォームやボタンを作るとき、「特定の条件を満たすまで操作できないようにしたい」という場面はよくあります。こうした動作を実現するために利用できるのが、disabled プロパティ です。

この記事では、JavaScriptを使って disabled プロパティを操作し、ボタンを有効（押せる）状態と無効（押せない）状態に切り替える方法を、実際のコード例とあわせてわかりやすく解説します。

動きをチェック

ボタンを押せる状態でクリックした回数がカウントされます

コード

<button id="btnA">押せる</button>
<button id="btnB" disabled>押せない</button>
<p>
  ボタンが反応した回数: <span id="count">0</span>
</p>
<script>
  const btnA = document.getElementById('btnA');
  const btnB = document.getElementById('btnB');
  const count = document.getElementById('count');

  let num = 0;

  function setButtonState(active, inactive) {
    active.disabled = true;
    active.textContent = '押せない';
    inactive.disabled = false;
    inactive.textContent = '押せる';
    num++;
    count.textContent = num;
  }

  btnA.addEventListener('click', () => setButtonState(btnA, btnB));
  btnB.addEventListener('click', () => setButtonState(btnB, btnA));
</script>

解説

ボタンとカウントの取得

const btnA = document.getElementById('btnA');
const btnB = document.getElementById('btnB');
const count = document.getElementById('count');

HTMLで用意した2つのボタンと、クリック数を表示する <span> を取得しています。
これで JavaScript からボタンの状態やクリック数を操作できるようになります。

---

カウント用の変数

let num = 0;

クリックされた回数を数えるための変数です。最初は0で始めます。

---

ボタンの状態を切り替える関数

function setButtonState(active, inactive) {
  active.disabled = true;
  active.textContent = '押せない';
  inactive.disabled = false;
  inactive.textContent = '押せる';
  num++;
  count.textContent = num;
}

クリックされたボタン（active）を「押せない」状態にし、もう一方のボタン（inactive）を「押せる」状態にします。
同時に num を1増やして、クリック数を画面に表示します。

---

クリックイベントの登録

btnA.addEventListener('click', () => setButtonState(btnA, btnB));
btnB.addEventListener('click', () => setButtonState(btnB, btnA));

ボタンがクリックされたときに、setButtonState を呼び出すようにしています。
ボタンAを押したときは A を無効にして B を有効に、ボタンBを押したときは逆に切り替わります。

---

まとめ

• disabled プロパティを使うと、ボタンを有効／無効に切り替えられます。
• 関数にまとめることで、2つのボタンを交互に操作する処理を簡潔に書けます。
• カウントを表示することで、実際にクリックが反応したことを確認できます。