JavaScript button.disabled 刪除後仍不可用：屬性 vs 特性的關鍵區別

問題現象

代碼執行 delete button.disabled 或 button.removeAttribute('disabled') 後，按鈕仍呈灰色禁用狀態，點擊無響應。

根本原因：DOM 屬性 vs HTML 特性

• HTML 特性：初始渲染時的屬性，removeAttribute 可移除；
• DOM 屬性：瀏覽器內部狀態，button.disabled 訪問/設置的是**布爾屬性**，而非特性；
• delete button.disabled 僅刪除 JS 對象上的自有屬性，**不影響瀏覽器內部禁用狀態**；
• 瀏覽器根據 **IDL 屬性** `HTMLButtonElement.disabled` (布爾值) 決定渲染與交互行為。

正確解除禁用方式

// 方式一：設置 DOM 布爾屬性為 false (推薦，最語義化)
button.disabled = false;

// 方式二：移除 HTML 特性 (同步更新 DOM 屬性)
button.removeAttribute('disabled');

// 方式三：jQuery (內部調用 .prop('disabled', false))
$(button).prop('disabled', false);
// ❌ 別用 .removeAttr('disabled')，舊版 jQuery 可能不同步 DOM 屬性

驗證實驗

<button id="btn" disabled>禁用</button>
<script>
  const btn = document.getElementById('btn');
  console.log('初始:', btn.disabled, btn.hasAttribute('disabled')); // true, true
  
  delete btn.disabled;
  console.log('delete 後:', btn.disabled, btn.hasAttribute('disabled')); // true, true (無效!)
  
  btn.disabled = false;
  console.log('disabled=false 後:', btn.disabled, btn.hasAttribute('disabled')); // false, false (生效!)
</script>

擴展：所有布爾屬性同理

總結

布爾型 HTML 屬性 (disabled, checked, selected...)，操作 DOM 屬性 (el.disabled = true/false) 是唯一標準、可靠方式。delete、removeAttribute、setAttribute('disabled', '') 皆非標準做法，行為跨瀏覽器不一致。牢記：**設置屬性值，而非增刪屬性**。