jQuery 動態生成 Checkbox 選中失效？attr vs prop 關鍵區別

場景：DataTables 動態渲染的 checkbox，AJAX 回調中嘗試根據返回數據勾選對應項，$("input:checkbox[value='...']") 選中器返回 `undefined`，靜態寫死的 checkbox 卻正常。

根因：動態元素尚未進入 DOM / 選中器時機錯誤

代碼執行順序：

1. AJAX 成功回調執行
2. 嘗試 $("input:checkbox[value='"+id+"']").prop('checked', true)
3. 但 DataTables 可能**尚未完成 DOM 更新**（異步渲染）
4. 選中器找不到元素 → 返回空 jQuery 對象 → 鏈式調用無報錯但無效果

雙重修復

1. 正確 API：用 prop() 而非 attr()

// 錯誤
$("input:checkbox[value='"+id+"']").attr('checked', 'true');

// 正確
$("input:checkbox[value='"+id+"']").prop('checked', true);

原因：checked、selected、disabled 是 **DOM 屬性**，反映當前狀態，prop() 操作屬性；attr() 操作 HTML 屬性（初始值），不會改變渲染狀態。

2. 確保 DOM 就緒：回調/事件/延遲

// 方案 A：DataTables 繪製完成事件
table.on('draw.dt', function() {
    selectCheckboxesByIds(responseIds);
});

// 方案 B：fnDrawCallback 初始化時指定
$('#table').DataTable({
    fnDrawCallback: function() { selectCheckboxesByIds(ids); }
});

// 方案 C：簡單粗暴 setTimeout (不推薦生產)
setTimeout(function() { selectCheckboxesByIds(ids); }, 0);

完整可用代碼模板

function selectCheckboxesByIds(ids) {
    if (!Array.isArray(ids) || ids.length === 0) return;
    
    // 使用 prop 批量設置
    ids.forEach(function(id) {
        var $chk = $("input:checkbox[value='" + id + "']");
        if ($chk.length) {
            $chk.prop('checked', true);
        } else {
            console.warn('Checkbox not found for id:', id);
        }
    });
}

// AJAX 成功回調中
success: function(data) {
    var ids = data.actConfg.map(function(item) { return item.businessId; });
    // 確保在 DOM 更新後執行
    setTimeout(function() { selectCheckboxesByIds(ids); }, 0);
}

調試技巧

• 控制台輸入 $("input:checkbox[value='目標值']").length 驗證選中器能否匹配
• 檢查元素是否在 `