复选框表单功能优化：选中时启用对应文本输入框

一、修复复选框与文本框的启用/禁用逻辑 #

你的enableDisableAll函数目前会把所有非当前元素都禁用，包括当前选中项对应的文本输入框。我们需要调整逻辑，让选中某个复选框时：

• 禁用其他所有复选框
• 启用当前复选框对应的文本输入框（如果存在）
• 禁用其他复选框对应的文本输入框
• 取消选中时，恢复所有复选框为可用状态，同时禁用所有文本输入框

修改后的JavaScript代码如下：

function enableDisableAll(e) { 
  const ownCheckbox = e;
  const form = document.getElementById('myForm');
  const allFormControls = form.querySelectorAll('.form_control'); // 获取所有选项容器

  allFormControls.forEach(control => {
    const checkbox = control.querySelector('.square');
    const textInput = control.querySelector('input[type=text]');

    if (checkbox === ownCheckbox) {
      // 处理当前选中的复选框及其文本框
      if (ownCheckbox.checked) {
        checkbox.disabled = false; // 当前复选框保持可用
        if (textInput) textInput.disabled = false; // 启用对应的文本框
      } else {
        checkbox.disabled = false; // 取消选中后当前复选框仍可用
        if (textInput) textInput.disabled = true; // 禁用对应的文本框
      }
    } else {
      // 处理其他复选框及其文本框
      checkbox.disabled = ownCheckbox.checked; // 选中时禁用其他复选框
      if (textInput) textInput.disabled = true; // 其他文本框始终禁用
    }
  });
}

代码说明： #

• 用querySelectorAll('.form_control')获取每个选项的容器，精准关联每个复选框和它对应的文本框
• 遍历每个容器时，分别定位里面的复选框和文本框
• 针对当前选中的复选框：选中时启用自身文本框，取消选中时禁用文本框
• 针对其他复选框：当前复选框选中时禁用它们，同时禁用它们的文本框

另外注意：你的HTML里存在重复的name属性（比如两个salIfSolde），这会导致提交时数据被覆盖，建议修改为唯一名称（如salIfSolde1、salIfSolde2），避免后端接收数据出错。

二、关于未选中项提交到数据库是否为null的疑问 #

在Laravel中，未选中的复选框不会被浏览器提交到后端（这是HTML表单的默认行为）。如果直接用$request->all()获取数据，未选中的复选框对应的字段会不存在。

要让未选中项在数据库中被视为null，你需要在后端处理请求时，为这些字段设置默认值：

示例控制器代码：

public function store(Request $request)
{
    $data = [
        'allSalary' => $request->input('allSalary', null),
        'salIfSolde' => $request->input('salIfSolde', null),
        'minSolde' => $request->input('minSolde', null),
        'salIfSoldeLimit' => $request->input('salIfSoldeLimit', null), // 假设修改了重复的name
        'no_Salary' => $request->input('no_Salary', null),
        // 其他字段...
    ];

    // 保存到数据库
    YourModel::create($data);

    // 后续逻辑...
}

这样，当某个复选框未被选中时，$request->input()会返回你指定的默认值null，存入数据库时就会是null（前提是你的数据库字段允许null值）。

如果你希望浏览器强制提交未选中的复选框，也可以在每个复选框后添加一个隐藏input，比如：

{{Form::checkbox('allSalary', true, (bool) 0, ['class' => 'square', 'onclick' => 'enableDisableAll(this)' ])}}
{{Form::hidden('allSalary', null)}} <!-- 添加这个隐藏字段 -->

这种方式下，即使复选框未选中，隐藏字段也会提交null值到后端，不过要确保隐藏字段的name和复选框一致，且放在复选框后面（浏览器会优先提交后面的字段，复选框选中时会覆盖隐藏字段的值）。

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