多选框关联输入框的启用/禁用与数据提交优化问题

一、前端修改（HTML + JavaScript） #

1. 调整表单字段命名结构 #

把输入框的name改成和复选框值关联的嵌套数组，避免索引错位，同时给输入框初始添加disabled属性（未选中时不会被提交）：

<div class="form-check">
  <input class="form-check-input fighting_style" name="txt_fightingStyle[]" type="checkbox" value="MMA" id="MMA">
  <label class="form-check-label" for="MMA">
    MMA
  </label>

  <section class="fighiting_value" id="MMA_input" style="display: none;">
    <div class="row">
      <div class="col-3">
        <div class="mb-3">
          <label class="form-label text-dark">WIN</label>
          <input type="text" class="form-control fights txt_win"
                 name="txt_fights[MMA][win]" onblur="totalFights()" disabled placeholder="">
        </div>
      </div>
      <div class="col-3">
        <div class="mb-3">
          <label class="form-label text-dark">LOSS</label>
          <input type="text" class="form-control fights txt_loss" data-points="75"
                 name="txt_fights[MMA][loss]" onblur="totalFights()" disabled placeholder="">
        </div>
      </div>
      <div class="col-3">
        <div class="mb-3">
          <label class="form-label text-dark">DRAW</label>
          <input type="text" class="form-control fights txt_draw" data-points="150"
                 name="txt_fights[MMA][draw]" onblur="totalFights()" disabled placeholder="">
        </div>
      </div>
    </div>
  </section>
</div>

2. 更新JavaScript逻辑 #

修改复选框点击事件，实现选中时启用输入框，取消选中时隐藏、禁用并清空输入值：

document.querySelectorAll("input.fighting_style").forEach(cb => {
  cb.addEventListener("click", ev => {
    const section = document.getElementById(`${cb.value}_input`);
    const inputs = section.querySelectorAll("input");
    
    if (ev.target.checked) {
      section.style.display = "block";
      inputs.forEach(input => input.disabled = false);
    } else {
      section.style.display = "none";
      inputs.forEach(input => {
        input.disabled = true;
        input.value = "";
      });
    }
  });
});

document.querySelectorAll("input[type=text]").forEach(t => t.addEventListener("blur", ev => totalFights()));

二、后端Controller修改 #

提交后，txt_fightingStyle是选中的格斗类型数组，txt_fights是对应类型的胜负平数据，直接循环关联插入：

$selectedStyles = $request->txt_fightingStyle ?? [];
$fightsData = $request->txt_fights ?? [];

foreach ($selectedStyles as $style) {
    $win = $fightsData[$style]['win'] ?? 0;
    $loss = $fightsData[$style]['loss'] ?? 0;
    $draw = $fightsData[$style]['draw'] ?? 0;
    
    FighitData::create([
        'fighting_style' => $style,
        'winning_game' => $win,
        'lost_game' => $loss,
        'draw_game' => $draw,
    ]);
}

效果说明 #

• 未选中复选框的输入框始终处于disabled状态，提交时不会被包含在表单数据中
• 后端获取的数据结构清晰，格斗类型与对应胜负平数据一一对应，无多余null值

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