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>

const targetButton = document.getElementById("target_button");
function updateDisabled(){
  targetButton.setAttribute("disabled", "");
}
function updateEnabled(){
  targetButton.removeAttribute("disabled", "");
}

・[無効化]ボタンを押下時

・[有効化]ボタンを押下時

参考