javascript - 使用 js 和 symfony 操作复选框

问题描述

我正在使用 EntityType 并使用自定义模板呈现表单。

我想隐藏复选框字段并使用JS添加背景颜色。
如果该项目被选中，否则将其删除。
显示工作（相对正确，当我在显示复选框时单击复选框本身仍然有问题）但是如果我多次提交不完整的表单，如果我取消选中一个框，提交后，服务器仍然显示复选框已选中...

挑战类型.php

$builder
            ->add('sports', EntityType::class, [
                'class' => Sport::class,
                'expanded' => true,
                'multiple' => true,
                'required' => true,
                'choice_label' => 'name',
                'query_builder' => function (SportRepository $er) {
                    return $er->createQueryBuilder('s')
                        ->orderBy('s.name', 'ASC');
                },
                'choice_attr' => function ($sport) {
                    return ['data-img' => $sport->getGoutte()];
                }
            ])

模板树枝

{{ form_start(form, {'attr': {'class': 'form-challenge', 'novalidate':'novaldiate'} }) }}

        <ul class="form-row justify-content-center list-unstyled text-center" id="sports-checkboxes">
            {{ form_errors(form.sports) }}
            {% for sport in form.sports.children %}
                <li
                        class="col-6 col-lg-2 col-md-3 col-sm-4 {{ sport.vars.checked? "bg-warning" : "" }}"
                        onclick="checkBoxClickHandler(event)"
                >
                    <img class="" src="/{{ sport.vars.attr['data-img'] }}" alt="{{ sport.vars.label }}"
                         style="width: 30px; height: auto">
                    <p>
                        <label for="{{ sport.vars.id }}">{{ sport.vars.label }}</label>
                        <input
                                class="d-none"
                                type="checkbox"
                                id="{{ sport.vars.id }}"
                                name="{{ sport.vars.full_name }}"
                                value="{{ sport.vars.value}}"
                                {{ sport.vars.checked? "checked" : "" }}
                        >
                        {#{{ form_widget(sport) }}#}
                    </p>
                </li>
            {% endfor %}
        </ul>

js代码

function checkBoxClickHandler(event){
            event.preventDefault();
            const li = event.target.closest('li');
            const input = li.querySelector('input')
            if (input.checked) {
                input.checked = false;
                input.removeAttribute('checked')
                li.classList.remove('bg-warning')
            } else {
                input.checked = true;
                li.classList.add('bg-warning')
            }
        }

知道我做错了什么吗？

标签： javascriptsymfonysymfony-forms

javascript - 使用 js 和 symfony 操作复选框

问题描述

解决方案

推荐阅读