如何恢复checkbox控制的数字输入框禁用前的最后输入值？

现有一个min为2、max为10的数字输入框，默认处于禁用（disabled）状态。旁边的复选框（checkbox）勾选时会切换输入框的disabled属性，启用输入框并设置默认值为2；取消勾选时输入框变为禁用状态，值重置为空以显示占位文本。

当前遇到的问题：如何恢复输入框禁用前的最后输入值？

示例流程：

• 勾选checkbox：输入框启用，默认值设为2。
• 将输入值改为7。
• 取消勾选checkbox：输入框禁用，值重置为''。
• 再次勾选checkbox，期望显示之前输入的7，但实际显示默认值2。

现有实现代码如下（存在问题：首次设置Input.value = '2'后，无法在后续勾选时恢复之前的输入值，且调用getValue()时会报错"The specified value "NaN" cannot be parsed, or is out of range."）：

const Input = document.querySelector('#input');
const Checkbox = document.querySelector('#box');

let inputValue = Input.value;

Checkbox.addEventListener('click',function(){
    if (this.checked){
        Input.toggleAttribute('disabled');
        Input.value = '2';
        Input.value = getValue(); // 此行会返回错误："The specified value "NaN" cannot be parsed, or is out of range."
    }
    if (!this.checked){
        Input.toggleAttribute('disabled');
        Input.value = '';
    }
})

Input.addEventListener('input',getValue);

function getValue(){
    let inputValue = this.value;
    if(this.value<2){
        this.value = '';
    } else if (this.value>10){
        this.value = '10';
    }
    return inputValue;
}

要解决这个问题，关键是单独存一个变量记录用户最后输入的有效数值——取消勾选时先把当前输入的有效值存起来，下次勾选时优先用这个缓存值，只有第一次勾选时才用默认的2。同时还要修复代码里的报错问题。

具体改法： #

1. 声明变量lastValidValue，初始值设为'2'（对应第一次启用的默认值），专门用来存储用户的有效输入。
2. 取消复选框时，先判断当前输入是否为合法值（在2-10之间），是就把它存到lastValidValue里，再清空输入框并禁用。
3. 勾选复选框时，不再强制设置为'2'，而是把lastValidValue赋值给输入框，同时触发一次校验确保值合法。
4. 修复getValue函数：输入值要转成数字再比较（避免字符串比较的bug，比如'10' < '2'在字符串比较中会被判定为true），每次输入有效数值时同步更新lastValidValue。

修改后的完整代码： #

const Input = document.querySelector('#input');
const Checkbox = document.querySelector('#box');

// 维护用户最后一次的有效输入值，初始为默认值'2'
let lastValidValue = '2';

Checkbox.addEventListener('click', function() {
    if (this.checked) {
        Input.disabled = false;
        // 赋值缓存的最后有效值
        Input.value = lastValidValue;
        // 触发校验，确保值合法
        getValue.call(Input);
    } else {
        // 禁用前先保存当前的有效值
        const currentNum = Number(Input.value);
        if (!isNaN(currentNum) && currentNum >= 2 && currentNum <= 10) {
            lastValidValue = String(currentNum);
        }
        Input.disabled = true;
        Input.value = '';
    }
});

Input.addEventListener('input', getValue);

function getValue() {
    const currentValue = Number(this.value);
    // 处理非法值：小于2清空，大于10设为10
    if (isNaN(currentValue) || currentValue < 2) {
        this.value = '';
    } else if (currentValue > 10) {
        this.value = '10';
        lastValidValue = '10';
    } else {
        // 合法值则更新缓存
        lastValidValue = String(currentValue);
    }
}

关键说明： #

• 用Input.disabled = false/true代替toggleAttribute，逻辑更清晰，避免多次触发导致状态反转错误。
• 取消勾选时先校验输入值的合法性，确保缓存的都是符合要求的数值。
• getValue函数中把输入转为数值类型后再比较，彻底解决字符串比较的逻辑错误。

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