HTMLのボタンを非活性にする方法

今回はHTMLのボタンを非活性にする方法を紹介していきます。

たとえばフォーム入力画面などで入力されていない状態のときはボタンを押せなくしたいなどの要望もあると思います。

ボタンを非活性の状態にする方法としてはdisable属性をつける方法とcssでボタンクリックを無効化にする方法があります。

disable属性をつける

まず一つ目はdisable属性をつける方法です。

disableとはHTMLのボタンなどを非活性（クリックできない状態）にする属性になります。

HTMLでは下記のようにdisable属性をつけることで非活性にすることができます。

<input type="submit" value="ボタン" id="btn" disabled>

下は disable 属性をつけたボタンになります。

javascriptで非活性にすることもできます。

document.getElementById('btn').disabled = true;

javascriptで非活性した場合も下記のようにボタンが押せなくなりました。

次はcssでボタンを非活性にする方法になります。

pointer-events: none;

これでボタンが押せなくなりました。

以上、ボタンの非活性の方法を3つほど紹介しました。

非活性を元の戻す方法はまた別の記事で紹介します。