jQuery 操作 EasyUI Checkbox 失效的原因與解決方案

問題現象

HTML 中使用 EasyUI 風格的 Checkbox：

<span class="easyui-checkbox">
  <input id="abc" name="abc" type="checkbox" data-options="width: 180" value="1">
</span>

使用 $("#abc").attr("checked", true); 設置選中狀態無效，但移除 class="easyui-checkbox" 後恢復正常。

根本原因

EasyUI 會將原生 <input> 隱藏，並動態生成模擬樣式的 DOM 結構（通常包含 <span>、<label> 等）。原始 input#abc 被隱藏且不再直接響應 UI 交互，jQuery 的 .attr("checked", true) 僅修改原生屬性，不觸發 EasyUI 內部的狀態同步機制。

解決方案

方案一：使用 .prop() 替代 .attr()（jQuery 1.6+）

$("#abc").prop("checked", true);

.prop() 設置的是 DOM 屬性，能正確觸發瀏覽器原生行為，但仍可能無法同步 EasyUI 的視圖層。

方案二：調用 EasyUI 官方 API（推薦）

// 設置選中
$("#abc").checkbox("check"); // 或 $("#abc").checkbox("setValue", true);

// 獲取狀態
var checked = $("#abc").checkbox("options").checked;

EasyUI 的 checkbox 方法會同時更新隱藏的原生 input 和可視化的模擬組件，保證數據與視圖一致。

方案三：觸發 change 事件強制同步

$("#abc").prop("checked", true).trigger("change");

部分場景下可觸發 EasyUI 綁定的事件監聽器實現同步，但不如官方 API 可靠。

最佳實踐建議

• 優先使用組件官方 API：避免直接操作被封裝的原生元素。
• 理解組件渲染機制：EasyUI、Bootstrap 等 UI 庫常隱藏原生控件，生成代理 DOM。
• 統一表單操作封裝：項目中封裝通用的 setFormValue()/getFormValue() 方法，屏蔽不同組件差異。

總結

jQuery 操作 EasyUI Checkbox 失效是因為組件將原生 input 隱藏並生成代理 DOM。解決核心在於使用 .prop() 而非 .attr()，更推薦調用 EasyUI 提供的 .checkbox("check") 官方方法，確保數據模型與視圖層完全同步。