jQuery 1.6+ 破壞性變更：.attr('checked') 返回 "checked"/undefined 的正確處理

問題現象

升級 jQuery 1.6+ 後，原本 $('#cb').attr('checked') 返回 true/false，現返回 "checked"（字符串）或 undefined，導致邏輯判斷失效。

根本原因

jQuery 1.6 明確區分了 Attributes（屬性） 與 Properties（特性）：

• checked attribute：HTML 初始值，不隨用戶操作變化。
• checked property：實時反映勾選狀態，隨交互即時更新。

正確代碼對比

// ❌ jQuery 1.6+ 錯誤用法
var checked = $('#cb').attr('checked'); // "checked" 或 undefined
$('#cb').attr('checked', true);         // 僅修改 attribute，不改變 UI 狀態

// ✅ 推薦：使用 .prop()
var checked = $('#cb').prop('checked'); // true / false
$('#cb').prop('checked', true);         // 正確修改勾選狀態

// ✅ 替代：使用 .is()
var checked = $('#cb').is(':checked');  // true / false

更多屬性/特性對照表

快速遷移清單

1. 全項目搜索 \.attr\(['\"]checked['\"]\) → 替換為 .prop('checked')。
2. 搜索 \.attr\(['\"]disabled['\"]\)、selected、readonly 等布爾屬性，同理改用 .prop()。
3. 保留 .attr() 僅用於：id、name、href、src、data-*、role、aria-* 等真正的 HTML 屬性。
4. 單元測試覆蓋所有表單交互頁面，驗證勾選/禁用/選中狀態邏輯。

總結

jQuery 1.6 的屬性/特性分離符合 DOM 標準，雖造成遷移痛點，但讓代碼語義更清晰：用 .prop() 操作動態狀態，用 .attr() 操作靜態屬性。養成這一習慣，未來升級將無痛。