如何在Contact Form 7中限制复选框最多选择3个选项？

先排查原代码的核心问题，再给出修复后的可行方案：

• 选择器匹配错误：原代码用.checkbox-field-name定位，但Contact Form 7的复选框容器默认类为wpcf7-checkbox，更可靠的方式是通过字段的name属性定位（比如你的字段定义是[checkbox your-checkboxes "选项1" "选项2"...]，就用input[name="your-checkboxes[]"]）。
• 转义字符问题：代码里的type="checkbox"是HTML转义后的字符，在JS中应直接使用type="checkbox"。
• 动态场景适配：若表单通过AJAX动态加载，直接绑定change事件可能失效，需确保DOM完全加载后再执行代码。

修复后的代码示例：

jQuery(document).ready(function($) {
  const maxSelections = 3;
  // 替换为你实际的复选框字段name
  const checkboxes = $('input[name="your-checkboxes[]"]');

  checkboxes.on('change', function() {
    const checkedCount = checkboxes.filter(':checked').length;
    // 选中数达上限时禁用未选选项，否则恢复可用
    checkboxes.filter(':not(:checked)').prop('disabled', checkedCount >= maxSelections);
  });
});

可选优化方案 #

如果不想禁用未选选项，而是直接阻止超额选择并提示用户，可以修改代码：

jQuery(document).ready(function($) {
  const maxSelections = 3;
  const checkboxes = $('input[name="your-checkboxes[]"]');

  checkboxes.on('change', function() {
    const checkedCount = checkboxes.filter(':checked').length;
    if (checkedCount > maxSelections) {
      $(this).prop('checked', false);
      alert('最多只能选择3个选项');
    }
  });
});

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