如何阻止未勾选的表单复选框被提交？

问题分析 #

你当前的代码尝试通过disabled属性阻止未勾选项提交，但Webflow的表单处理机制可能忽略disabled状态，再加上你同时给.checkbox和兄弟输入框设置了重复的name属性，最终导致未勾选项仍被提交。

可行解决方案 #

方案1：通过移除/添加name属性控制提交 #

表单控件只有带有name属性才会被提交，因此我们可以在复选框勾选时添加name，未勾选时移除name，同时配合disabled增强效果：

// 初始化：设置所有输入的初始状态
$('.checkbox').each(function() {
  const labelText = $(this).siblings('span').text();
  const targetInput = $(this).siblings("div").children('input');
  
  // 初始化时移除name并设置disabled
  targetInput.attr({
    "data-name": labelText,
    "disabled": "disabled"
  }).removeAttr("name");
  
  // 给复选框本身设置标识，无需重复设name
  $(this).attr("data-name", labelText);
});

// 复选框切换事件
$('.checkbox').on('change', function() {
  const targetInput = $(this).siblings("div").children('input');
  const labelText = $(this).data("name");
  
  if ($(this).prop("checked")) {
    targetInput.removeAttr("disabled").attr("name", labelText);
  } else {
    targetInput.attr("disabled", "disabled").removeAttr("name");
  }
});

// 表单提交前二次校验，确保未勾选项无name
$('form').on('submit', function() {
  $('.checkbox:not(:checked)').each(function() {
    $(this).siblings("div").children('input').removeAttr("name").attr("disabled", "disabled");
  });
});

方案2：自定义表单提交逻辑（绕过Webflow默认处理） #

如果Webflow默认表单机制仍干扰提交结果，可以完全自定义提交逻辑，只收集勾选项再通过AJAX提交：

// 阻止表单默认提交行为
$('form').on('submit', function(e) {
  e.preventDefault();
  
  // 收集所有勾选的复选框字段
  const formData = new FormData();
  $('.checkbox:checked').each(function() {
    const labelText = $(this).data("name");
    formData.append(labelText, "on"); // 值可根据需求自定义
  });
  
  // 收集表单其他必填字段（如姓名、邮箱等）
  $(this).find('input[name]:not(.checkbox-related)').each(function() {
    formData.append($(this).attr("name"), $(this).val());
  });
  
  // 提交到Webflow表单端点（替换为你的表单action地址）
  $.ajax({
    url: $(this).attr("action"),
    method: "POST",
    data: formData,
    processData: false,
    contentType: false,
    success: function() {
      // 提交成功后的逻辑，比如显示提示
      alert("提交成功");
    },
    error: function() {
      // 错误处理
      alert("提交失败，请重试");
    }
  });
});

关键注意事项 #

• 确认DOM结构正确：保证.checkbox和对应的输入框是正确的兄弟关系，避免选择器匹配错误。
• 避免重复name：不要给多个表单控件设置相同name，否则会导致提交数据混乱。
• 测试提交结果：提交后查看Webflow表单记录，确认只有勾选的项被提交。

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