Symfony中如何实现复选框勾选时将TextType设为只读并禁用验证

实现分两部分，后端动态调整验证规则是核心，前端只负责页面交互效果，避免前端逻辑被绕过。

1. 后端表单逻辑修改 #

首先在表单类顶部引入表单事件相关类，再修改表单构建代码，通过PRE_SUBMIT事件动态修改文本字段配置：

// 表单类头部引入依赖
use Symfony\Component\Form\FormEvent;
use Symfony\Component\Form\FormEvents;
use Symfony\Component\Validator\Constraints\NotBlank;
use Symfony\Component\Form\Extension\Core\Type\TextType;
use Symfony\Component\Form\Extension\Core\Type\CheckboxType;

// 原有表单构建代码修改
$formBuilder
    ->add('text', TextType::class, [
        'required' => true,
        'constraints' => [
            new NotBlank()
        ],
        'attr' => [
            'data-toggle-target' => 'readonly-field'
        ]
    ])
    ->add('box', CheckboxType::class, [
        'mapped' => false,
        'label' => 'Box',
        'attr' => [
            'data-toggle' => 'readonly-trigger'
        ]
    ]);

// 绑定提交前事件，动态调整字段规则
$formBuilder->addEventListener(FormEvents::PRE_SUBMIT, function (FormEvent $event) {
    $submitData = $event->getData();
    $form = $event->getForm();

    // 复选框被勾选时，重写文本字段配置
    if (!empty($submitData['box'])) {
        $form->add('text', TextType::class, [
            'required' => false,
            'constraints' => [], // 清空所有验证规则
            'mapped' => true, // 保持和原字段的实体映射关系一致
            'attr' => [
                'readonly' => true,
                'data-toggle-target' => 'readonly-field'
            ]
        ]);
    }
});

2. 前端交互逻辑 #

在渲染表单的模板中加入原生JS代码，实现勾选复选框时实时切换文本域的只读状态，不需要额外引入前端库：

document.addEventListener('DOMContentLoaded', () => {
    const trigger = document.querySelector('[data-toggle="readonly-trigger"]');
    const targetField = document.querySelector('[data-toggle-target="readonly-field"]');

    const updateFieldStatus = () => {
        targetField.toggleAttribute('readonly', trigger.checked);
        // 如果需要勾选时自动清空文本域已有内容，放开下一行注释即可
        // if (trigger.checked) targetField.value = '';
    };

    // 页面加载时初始化一次状态（兼容复选框默认勾选的场景）
    updateFieldStatus();
    // 监听复选框状态变化
    trigger.addEventListener('change', updateFieldStatus);
});

注意：必须保留后端事件逻辑，仅靠前端设置readonly属性可以被用户轻易修改DOM绕过，会导致验证规则不生效或提交异常。

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