如何实现表单提交后保持checkbox勾选状态且默认禁用关联输入框

你的问题核心是表单提交后页面重新渲染时，没有主动还原checkbox的勾选状态、以及关联输入框的启用状态，可按你实际的项目场景选择对应方案：

场景1：传统服务端渲染（提交后页面刷新） #

第一步：补全checkbox的name属性 #

原有代码的checkbox没有配置name，提交表单时不会把勾选状态传递到后端，先补充：

<!-- 给checkbox加name属性，值可自定义 -->
<input type="checkbox" name="enableFilter" onclick="var input = document.getElementById('Filter'); if(this.checked){ input.disabled = false; input.focus();}else{input.disabled=true;}" />

第二步：服务端渲染时主动注入状态 #

后端接收到表单提交的参数后，渲染页面时做两个判断：

• 如果enableFilter参数存在（说明提交时该checkbox为勾选状态），给checkbox加checked属性
• 如果enableFilter参数存在，给关联的输入框去掉disabled属性
  改造后的渲染逻辑示意（以PHP为例，其他后端语言逻辑同理）：

<div>
    <input 
        type="checkbox" 
        name="enableFilter" 
        <?php if(isset($_POST['enableFilter'])) echo 'checked' ?>
        onclick="var input = document.getElementById('Filter'); if(this.checked){ input.disabled = false; input.focus();}else{input.disabled=true;}" 
    />
    <span class="text-white">Filter</span>
    <input 
        id="Filter" 
        name="Filter" 
        <?php if(!isset($_POST['enableFilter'])) echo 'disabled="disabled"' ?>
    />
</div>

场景2：前端异步提交（页面不刷新） #

这种情况下表单默认不会重置状态，如果出现重置问题一般是提交逻辑里手动调用了form.reset()方法，有两种解决方式：

• 提交前先暂存所有checkbox的勾选状态，调用reset后再把状态赋值回去
• 不调用表单的reset方法，只手动清空不需要保留的输入项内容

优化建议：抽离内联事件逻辑 #

把内联的onclick逻辑抽成公共方法，多组过滤器复用更方便，示例如下：

<script>
function toggleFilter(checkbox, inputId) {
    const input = document.getElementById(inputId);
    input.disabled = !checkbox.checked;
    if(checkbox.checked) input.focus();
}
</script>

<div>
    <input type="checkbox" name="enableFilter" onclick="toggleFilter(this, 'Filter')" />
    <span class="text-white">Filter</span>
    <input id="Filter" name="Filter" disabled="disabled" />
</div>
<!-- 多组过滤器直接复用方法即可 -->
<div>
    <input type="checkbox" name="enableSearch" onclick="toggleFilter(this, 'Search')" />
    <span class="text-white">Search</span>
    <input id="Search" name="Search" disabled="disabled" />
</div>

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