【HTML】disabled属性でボタンなどを無効にしたりJavaScriptで切り替える方法

このページについて

このページではHTMLで使う事ができるdisabled属性の機能と使い方を掲載しています。

disabled属性は設定した要素を無効にします。これは単体ではあまり有効なように見えませんが、JavaScriptを使って後から解除するように設定すれば問題ありません。

disabled属性はブール値と言って「書いたら有効、書かなかったら無効」というシンプルな仕組みになっています。そのため使えるタグに対して一緒に書くだけでOKとなります。

<button disabled>無効のボタン</button>

このように押せないボタンの出来上がりとなります。

disabledの付与されたボタンに対してJavaScriptでdisabledを無効化して押せるボタンに変化させるには、その要素のdisabled属性を無効化すればOKとなります。

色々と書かれていますが、まずはブロックごとに分けて解説します。

まず最初はHTMLのformタグから。ここにはname属性やらid属性やらがありますが、JavaScriptと一緒に使うだけであればonclick属性のみ必須です。今回はその他は無視してもらって構いません。

まずinputタグはtype属性でcheckboxを使用しているので、シンプルにチェックの有無の機能を持つボタンがあります。そしてonclickイベントでJavaScriptのbuttonFunc関数を起動するように指定してあります。

そのbuttonFunc関数でおこなっていることは、一行目でvar xを宣言しつつ、id=dsbに対してdisabledの有無を調べています。このid=dsbというのは見ての通り無効のボタンのことを指しています。そしてdisabledは有るので、変数xには「true」が代入されます。

二行目ではif文を使い、変数xがtrueかfalseで行うことを変えています。trueであれば「ボタンのdisabled属性を無効化」しつつ、「id=as3に’ボタンは有効です’を表示する」という処理が書かれています。実際にチェックボックスが有効化されるとこうなります。

ボタンが有効の状態で再びチェックボックスがクリックされた場合、再び無効に変化してほしいとします。その場合も想定し、else ifで「ボタンのdisabled属性を有効化」しつつ、「id=as3に’ボタンは無効です’を表示する」という処理を書いています。こちらが無効になったときの表示です。

これらはHTMLとJavaScriptをある程度理解した前提で行うことなので、最初は意味不明でも問題ありません。少しずつ覚えていきましょう。

disabled属性はボタンの状態をクリックできないように変化させる機能を持っています。そしてJavaScriptで関数を作って特定の場所の状態を取得すれば、その状態によってボタンの有効や無効を切り替える事も可能です。少々難しいですが、慣れてしまえば簡単に作る事もできます。