JavaScript 複選框控制輸入框狀態：從隱藏改為唯讀/禁用的正確實作方法

需求分析

原需求：勾選複選框時將輸入框設為「不可見」。
修正需求：勾選時設為「唯讀狀態」，使用者可看見內容但無法編輯。

錯誤嘗試分析

• readonly="true"：屬性值應為 readonly（布林屬性），非字串
• background:expression(this.readOnly=true)：IE 專有 CSS Expression，已棄用且有安全風險
• CSS 無法直接控制表單元素的 readonly/disabled 狀態

正確解決方案：JavaScript 控制 DOM 屬性

方案一：唯讀模式（可看見、可複製、隨表單提交）

<input type="checkbox" id="chkControl" onchange="toggleReadonly(this)"> 鎖定輸入框
<input type="text" id="txtTarget" value="預設內容">

<script>
function toggleReadonly(checkbox) {
    const input = document.getElementById('txtTarget');
    input.readOnly = checkbox.checked;  // 布林值直接指派
    // 視覺回饋：唯讀時改變背景色
    input.style.backgroundColor = checkbox.checked ? '#f5f5f5' : '';
}
</script>

方案二：禁用模式（灰色、不可焦點、不隨表單提交）

function toggleDisabled(checkbox) {
    const input = document.getElementById('txtTarget');
    input.disabled = checkbox.checked;
}

差異比較：

jQuery 版本（若專案已引用）

$('#chkControl').on('change', function() {
    $('#txtTarget').prop('readOnly', this.checked);
    // 或 .prop('disabled', this.checked);
});

進階：多欄位同步控制

<input type="checkbox" id="chkAll" data-targets="field1 field2 field3">

<script>
document.getElementById('chkAll').addEventListener('change', function() {
    const targetIds = this.dataset.targets.split(' ');
    const isReadonly = this.checked;
    
    targetIds.forEach(id => {
        const el = document.getElementById(id);
        if (el) {
            el.readOnly = isReadonly;
            el.style.backgroundColor = isReadonly ? '#e9ecef' : '';
        }
    });
});
</script>

CSS 偽類輔助樣式（純樣式增強）

input[readonly] {
    background-color: #f8f9fa;
    border-color: #ced4da;
    cursor: not-allowed;
}

input:read-only {  /* 現代瀏覽器支援 */
    /* 唯讀專用樣式 */
}

總結

控制表單元素狀態必須使用 JavaScript 設定 DOM 屬性（readOnly 或 disabled），CSS 僅能提供視覺回饋。根據業務需求選擇：需提交資料用 readOnly，完全禁用互動用 disabled。