EasyUI Textbox 只讀屬性設置無效：使用官方 API textBox('readonly') 替代 jQuery attr

現象

$("#NMI17").attr("readonly", "readonly"); // 無效
$("#NMI17").textbox("setValue", "aaa");  // 有效

原因

EasyUI Textbox 將原生 `` 包裝為複雜 DOM 結構 (外層 `span`、`input` 隱藏、生成新的可見 `input`)。jQuery `attr` 只操作原始隱藏 input，不影響 UI 層渲染邏輯。

正確 API

// 設置只讀
$("#NMI17").textbox("readonly");           // 設置為只讀
$("#NMI17").textbox("readonly", true);     // 明確 true
$("#NMI17").textbox("readonly", false);    // 取消只讀

// 獲取只讀狀態
var isReadonly = $("#NMI17").textbox("options").readonly;

// 其他常用方法
$("#NMI17").textbox("setValue", "新值");
$("#NMI17").textbox("getValue");
$("#NMI17").textbox("disable");  // 禁用 (灰化)
$("#NMI17").textbox("enable");
$("#NMI17").textbox("clear");

原理說明

• EasyUI 組件遵循 **「配置選項 + 方法調用」** 模式：`$('#id').textbox('method', args)`。
• 底層同步更新內部狀態、重繪 DOM、觸發事件，保證 UI 與數據一致。
• 直接操作 DOM (jQuery `attr`/`css`/`val`) 破壞封裝，導致狀態不同步。

參考文檔

EasyUI Textbox API 完整中文手冊

最佳實踐

1. **查閱官方 API 文檔**，優先使用組件提供的方法。
2. 封裝常用操作為工具函數：`function setReadonly(id, flag) { $('#'+id).textbox('readonly', flag); }`。
3. 避免混用原生 jQuery DOM 操作與 EasyUI API，選擇一種風格貫徹項目。