【JS】ボタンの有効・無効を切り替えるサンプルコード

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を押したときは逆に切り替わります。

---

次に役立つヒント

• ボタンだけでなく、入力フォーム（input）の無効化も同じ disabled で制御できます。
• 条件分岐（if文）と組み合わせれば、「入力漏れがある間は送信ボタンを押せない」といった実戦的なコードに拡張可能です。