如何在JavaScript中强制更新NumberInputs变量适配复选框操作？

问题描述 #

搭建包含带多输入框表格的网站，需求是点击复选框时更新NumberInputs变量（用于筛选可编辑的数字输入框）。已实现复选框勾选/取消时移除/添加对应输入框的readonly属性，但遇到以下问题：

• 在复选框change事件内重新赋值NumberInputs时，提示变量未被读取
• 勾选复选框输入值后刷新页面，复选框状态可恢复，但输入值无法恢复，需再次刷新并输入才能生效

现有代码如下：

复选框控制输入框readonly状态的代码 #

// 勾选复选框时移除输入框readonly属性
var checkboxes = document.querySelectorAll("[id^='check_']")

for (var i = 0; i < checkboxes.length; i++){
    var checkbox = checkboxes[i];
    var inputId = checkbox.getAttribute("data-input-id");
    var inputElement = document.getElementById(inputId);
    (function(checkbox, inputElement){
        checkbox.addEventListener("change", function(){
            if (checkbox.checked){
                inputElement.removeAttribute("readonly")
            } else{
                inputElement.setAttribute("readonly", "readonly");
            };
        });
    })(checkbox, inputElement);
};

localStorage存储与恢复的代码 #

// 获取表格中所有非readonly的数字输入框
var NumberInputs = document.querySelectorAll('input[type="number"]:not([readonly])');

// 输入值变化时保存到localStorage
NumberInputs.forEach(function(input){
    input.addEventListener('change', function(){
        localStorage.setItem(input.id, input.value);
    });
});

// 页面加载时恢复保存的输入值
window.addEventListener('load', function(){
    NumberInputs.forEach(function(input){
        var SavedValue = localStorage.getItem(input.id);
        if (SavedValue){
            input.value = SavedValue;
        }
    });
});

解决方案 #

问题核心在于NumberInputs仅在页面加载时初始化，未动态响应复选框状态变化，且页面加载时未处理处于readonly状态但已有存储值的输入框。可通过以下步骤修改：

1. 调整页面加载时的值恢复逻辑 #

页面加载时，遍历所有数字输入框恢复存储值，再根据对应复选框的状态设置输入框的readonly属性（需给每个输入框添加data-checkbox-id属性，对应关联的复选框ID）：

window.addEventListener('load', function(){
    // 先恢复所有数字输入框的存储值
    document.querySelectorAll('input[type="number"]').forEach(function(input){
        var SavedValue = localStorage.getItem(input.id);
        if (SavedValue){
            input.value = SavedValue;
        }
        // 根据对应复选框状态设置readonly
        var checkboxId = input.getAttribute("data-checkbox-id");
        var checkbox = document.getElementById(checkboxId);
        if (checkbox && !checkbox.checked){
            input.setAttribute("readonly", "readonly");
        }
    });

    // 恢复复选框状态（若未实现该逻辑需补充）
    document.querySelectorAll("[id^='check_']").forEach(function(checkbox){
        var savedState = localStorage.getItem(checkbox.id);
        checkbox.checked = savedState === "true";
    });
});

2. 提前给所有数字输入框绑定存储事件 #

无需依赖NumberInputs变量，直接给所有数字输入框绑定change事件——输入框处于readonly状态时，用户无法触发change事件，不会产生无效存储：

// 给所有数字输入框绑定localStorage存储事件
document.querySelectorAll('input[type="number"]').forEach(function(input){
    input.addEventListener('change', function(){
        localStorage.setItem(input.id, input.value);
    });
});

3. 动态更新全局变量（可选） #

若仍需维护NumberInputs变量，需将其声明为全局变量，且在复选框change事件内不要重新声明（去掉var），直接更新：

// 全局声明变量
var NumberInputs = document.querySelectorAll('input[type="number"]:not([readonly])');

// 修改复选框事件内的代码
checkbox.addEventListener("change", function(){
    if (checkbox.checked){
        inputElement.removeAttribute("readonly")
    } else{
        inputElement.setAttribute("readonly", "readonly");
    };
    // 更新全局变量
    NumberInputs = document.querySelectorAll('input[type="number"]:not([readonly])');
});

关键说明 #

• 页面加载时先恢复输入值，再设置readonly属性，避免值被覆盖
• 提前绑定所有输入框的change事件，省去动态更新变量后重新绑定事件的麻烦
• 确保复选框状态恢复逻辑在输入框readonly设置前执行，保证状态匹配

内容的提问来源于stack exchange，提问作者user20733481