disabled属性とは
HTMLの論理属性で、付与対象のフォームコントロール要素の各操作が有効か無効かを
決定するもの。
各操作とは、例えばフォーカスの付与・ボタン操作・入力・選択などのこと。
※論理属性：存在するか否かでtrue/falseを判定する属性のこと。
属性が存在すればtrue、存在しなければfalseとなる。
例：disabled・checked・requiredなど
例：buttonタグでのdisable属性の挙動
①正しい挙動：disabled属性自体の有無で制御する方法
・非活性化（押下不可）としたい場合
<button disabled>ボタン</button>
・活性化（押下可能）としたい場合
<button>ボタン</button>
②間違った挙動：diabled属性の値を真偽で制御する方法
・非活性化（押下不可）としたい場合
<button disabled="true">ボタン</button>
・活性化（押下可能）としたい場合
<button disabled="false">ボタン</button>
上記のようにdisabled属性の値の真偽値で制御できると勘違いしやすいのですが、
この場合は両方とも非活性となってしまいます。
理由はdisable属性自体は両方存在しており、その値の内容に関わらずtrueと
なってしまうためです。
活用例
JavaScriptを利用して、[無効化][有効化]ボタンにより動的に[ボタン]ボタンの活性状態を
変更するコードを記述します。
<button id="target_button">ボタン</button>
<button onClick="updateDisabled()">無効化</button>
<button onClick="updateEnabled()">有効化</button>
JavaScriptでは、disabledプロパティをbool値で指定することでdisable属性自体の
有無を設定することができます。
const targetButton = document.getElementById("target_button");
function updateDisabled(){ targetButton.disabled = true; }
function updateEnabled(){ targetButton.disabled = false };
・[無効化]ボタンを押下時
※Chrome[検証]で確認すると、以下のようにdisabled属性が付与されています。
・[有効化]ボタンを押下時
※Chrome[検証]で確認すると、以下のようにdisabled属性がありません。
また、参考までにですが以下のようにsetAttribute、removeAttributeメソッドでも
同様の動きが実現できます。しかし、上記方法の方がシンプル・直感的・高パフォーマンスのため、
基本的には上記方法が良いと思います。
const targetButton = document.getElementById("target_button");
function updateDisabled(){ targetButton.setAttribute("disabled", ""); }
function updateEnabled(){ targetButton.removeAttribute("disabled", ""); }
※プロパティ操作targetButton.disabled = true;が
属性操作targetButton.setAttribute("disabled", "");と比較して高パフォーマンス
である理由ですが、調査したところ以下のようになります。
・属性操作：DOMツリーを辿って対象要素を発見し、属性を操作（トラバースという）
を行うため、その分時間がかかる
・プロパティ操作：対象要素をトラバースせず、直接要素のプロパティにアクセス
し、操作を行う
なんとなくはイメージできた（ような気がする…）のですが、このあたりの知識に詳しい
方がいらっしゃいましたらコメントで教えていただけますと幸いです。
参考