【HTML】disabled属性の使い方が初級者に分かりにくい

私がWeb系の開発に関する情報を検索していて思ったことですが、Web系の技術情報は、ググればいくらでも情報が出てきますが、その代わり情報の精度もまちまちで、なおかつ自身が初心者である場合に、大きな勘違いに陥りやすいことが多いと感じています。

そこで、自分なりに「間違いやすい」と感じた部分について、他にも同じ事を感じる方もいらっしゃるであろうと想像し、自身がハマった点を当ブログでもまとめていこうと思っております。

今回は、HTMLのdisabled属性についてです。
これが以外と私はハマってしまいました。

1 有効無効の切り替えが出来ない？
2 結局属性の有無のみで切り替えが可能
3 JavaScriptとJQueryそれぞれのコーディング例

有効無効の切り替えが出来ない？

Webページ上で、ボタンの有効、無効を切り替えたい場合にどうするかを調べていて、”disabled”属性を使用することで実現可能だと知ったのですが、その使い方について大きな勘違いをしていたようです。

[勘違いの例]

	
<div>
	<input type="button" id="bt01" value="ボタン１" disabled="true">
	<input type="button" id="bt02" value="ボタン２" disabled="false">
</div>

上記はボタン１、ボタン２の２つを表示するHTMLタグとなりますが、ボタン１を不活性、ボタン２を活性にしたいと思っていました。
私は、上記のようにdisabled属性をtrueにすることでボタンを不活性、falseにすることでボタンを活性化できるという「勘違い」をしてしまいました。

上記の例ですと、ボタン１を押せない状態、ボタン２を押せる状態にしているつもりでした。

しかし、実際のボタンは１，２のどちらも押せません。
どちらもdisabled属性が有効になっています。

結局属性の有無のみで切り替えが可能

結局、disabled属性が「存在している」だけで、その要素は不活性となってしまいます。
disabled=”true” であろうが、disabled=”false”であろうが、要素内にdisabledが存在しているだけで、その要素は不活性なのです。

つまり、ボタン１だけを不活性にしたいなら、以下の記述で良いのです。

[正しい例]

	
<div>
	<input type="button" id="bt01" value="ボタン１" disabled>
	<input type="button" id="bt02" value="ボタン２" >
</div>

JavaScriptとJQueryそれぞれのコーディング例

さて、disabledの正しい記述は分かったのですが、HTMLのみで静的にボタンを無効にする事はほとんどやりませんよね。
大概の場合は、ある条件において、ボタンを不活性にしたり、活性にしたりと動的に切り替えると思います。

ここで、JavaScriptのコードと、JQueryのコード例を比較してみます。
先程のボタン１、ボタン２の下に、disabledを解除するボタン、設定するボタンを配置してみます。
ボタン１と２を同時に非活性、活性にしてみます。

[HTML]

	
<div>
	<input type="button" id="bt01" value="ボタン１">
	<input type="button" id="bt02" value="ボタン２">
</div>
<br/>
<div>
	<input type="button" id="kaijyo" value="disabled解除" onclick="removeDisabled()">
	<input type="button" id="settei" value="disabled設定" onclick="setDisabled()">

</div>

ブラウザで表示すると以下のようになります。
ボタン１、ボタン２の両方とも押せる状態です。

[JavaScript]

function setDisabled(){
　　document.getElementById('bt01').disabled=true;
　　document.getElementById('bt02').disabled=true;
}
function removeDisabled(){
　　document.getElementById('bt01').disabled=false;
　　document.getElementById('bt02').disabled=false;
}

disabled=trueにすると、要素内にdisabled属性が追加されて、
disabled=falseにすると、要素内からdisabled属性が削除されます。

試しに、disabled設定ボタンをクリックすると、以下のようにボタンが２つとも非活性状態になります。

chromeのデベロッパーツールで表示すると、各ボタン要素に”disabled”要素が追加されていることがわかります。

また、同じ動作をJQueryで記述した場合も以下に示しておきます。

[JQuery]

function setDisabled(){
    $('#bt01').prop('disabled', true);
    $('#bt02').prop('disabled', true);
}
function removeDisabled(){
    $('#bt01').prop('disabled', false);
    $('#bt02').prop('disabled', false);
}

JQueryでは、prop()を使ってdisabledを設定します。
第１引数に’disabled’、第２引数にtrueまたはfalseを指定します。

いかがでしたか？
思った通りにボタンの活性、不活性が制御できるようになりましたか？

繰り返しになりますが、
disabled属性は存在するだけでその要素が不活性になりますので、お忘れなく。

余談ですが、私はフリーランスになるまでWeb系の開発経験はありませんでした。独学でHTML, Javascript, CSSを学んでいましたが、すき間時間に効率よく学習したいと思い、オンラインの学習サービス「Udemy」のWeb系開発コースで勉強してみました。

ネット環境があれば、いつでもどこでも動画での学習を進めることが可能です。
書籍のみでは理解が進まない箇所も、Udemyなら動画で何度でも繰り返し視聴できるので、非常に効率良く学習できます。

また、Udemyでは頻繫に頻繫にセールを実施していて、かなり破格の値段で各コースを購入することが可能です。
得体の知れないプログラミングスクールに何十万も投資するよりもコスパが良いです。

経験者であれば、初心者向けの高額なプログラミングスクールではなく、書籍プラスUdemyでの動画学習で十分だと思います。