如何用JavaScript隐藏Symfony表单中的按钮元素

用Symfony构建多步骤HTML表单，希望通过勾选复选框隐藏带有optional类的“下一步”按钮。目前JavaScript逻辑在浏览器检查器中能看到设置的CSS，但实际按钮并未隐藏；隐藏div内的输入框正常，但按钮完全无效。

现有代码 #

JavaScript代码 #

const checkbox = document.querySelector("input[type=checkbox]");

checkbox.addEventListener( 'change', function() {
    if(this.checked) {
        document.querySelector(".optional").style.display = "none !important";
    } else {
        document.querySelector(".optional").style.display = "initial";
    }
});

Twig模板（register.html.twig） #

{% extends 'base.html.twig' %}

{% block title %}Incris-toi sur Go Zpeak !{% endblock %}

{% block main %}

{{ form_start(userform) }}

    <div class="form container">

        <div class="formpage">
            
            <div class="form-floating mb-3">
                {{ form_widget(userform.email, {'attr' : {'placeholder' : 'Mon adresse e-mail', 'class' : 'form-control'}}) }}
                {{ form_label(userform.email, 'Mon adresse e-mail', {'label_attr' : {'class' : 'label'}}) }}
            </div>
            <div class="form-floating mb-3">
                {{ form_widget(userform.password.first, {'attr' : {'placeholder' : 'Mon mot de passe', 'class' : 'form-control'}}) }}
                {{ form_label(userform.password.first, 'Mon mot de passe', {'label_attr' : {'class' : 'label'}}) }}
            </div>
            <div class="form-floating">
                {{ form_widget(userform.password.second, {'attr' : {'placeholder' : 'Confirmation de mon mot de passe', 'class' : 'form-control'}}) }}
                {{ form_label(userform.password.second, 'Confirmation de mon mot de passe', {'label_attr' : {'class' : 'label'}}) }}
            </div>
            <div class="form-checkbox">
                {{ form_widget(userform.roles) }}
                <span class="checkbox"></span>
                <span class="checkmark"></span>
            </div>
            <div>
                <button type="button" class="next btn btn-lg btn-outline-primary mt-4 d-flex mx-auto">Je m'inscris</button>
            </div>
        </div>
        <div class="formpage">
            <div class="form-floating mb-3">
                {{ form_widget(userform.occupation, {'attr' : {'placeholder' : 'Quelle est ton occupation (ton métier, tes études…) ?', 'class' : 'form-control'}}) }}
                {{ form_label(userform.occupation, 'Quelle est ton occupation (ton métier, tes études…) ?', {'label_attr' : {'class' : 'label'}}) }}
            </div>
            <div class="mb-3">
                <p>De quel pays es-tu originaire ?</p>
                {{ form_widget(userform.nationality) }}
            </div>
            <div class="mb-3">
                <p>Quelle est ta langue maternelle ?</p>
                {{ form_widget(userform.nativelanguage) }}
            </div>
            <div class="d-flex">
                <button type="button" class="prev btn btn-lg btn-outline-secondary mt-4 d-flex align-items-center me-auto">&lt;<span class="previous">Précédent</span></button>
                <button type="button" class="next optional btn btn-lg btn-outline-primary mt-4 d-flex ms-auto">Suivant</button>
                <button class="btn optional-validation btn-lg btn-outline-primary mt-4 d-flex ms-auto">Je valide</button>
            </div>
        </div>
        <div class="formpage">
            <div class="mb-3">
                <p>Quelle langue souhaites-tu pratiquer ?</p>
                <div class="wishedlanguagelist">
                    {{ form_widget(userform.wishedlanguages, {'attr' : {'class' : 'form-control mb-3'}}) }}
                </div>
                <div class="d-flex justify-content-between">
                    <button type="button" class="question-button btn btn-outline-secondary" id="addwishedlanguage">+ Ajouter une langue</button>
                    <button type="button" class="question-button btn btn-outline-secondary" id="removewishedlanguage">- Supprimer la dernière langue</button>
                </div>
            </div>
            <div class="d-flex">
                <button type="button" class="prev btn btn-lg btn-outline-secondary mt-4 d-flex align-items-center me-auto">&lt;<span class="previous">Précédent</span></button>
                {{ form_row(userform.save, {'attr' : {'class' : 'btn btn-lg btn-outline-primary mt-4 d-flex ms-auto'}}) }}
            </div>
        </div>

    </div>

{{ form_end(userform) }}

{% endblock %}

{% block js %}

<script src="../assets/js/scripts.js"></script>

{% endblock %}   

问题原因 #

1. !important在内联样式中无效：通过element.style.display设置"none !important"是错误写法，DOM.style API不识别这种格式，浏览器会忽略该值，导致样式不生效。
2. 选择器范围不足：document.querySelector(".optional")仅选中第一个匹配元素，模板中还有optional-validation按钮也需要隐藏，当前代码未处理。
3. Bootstrap样式优先级：按钮上的Bootstrap类（如btn、d-flex）自带的display样式优先级高于普通内联样式，即使去掉!important也可能被覆盖。

修复方案 #

推荐方案：使用CSS类控制显示 #

通过添加/移除自定义CSS类来控制元素显示，避免内联样式的优先级问题：

1. 在全局CSS中添加隐藏类：

.hidden {
    display: none !important;
}

2. 修改JavaScript代码：

const checkbox = document.querySelector("input[type=checkbox]");
// 选中所有需要控制的元素
const optionalElements = document.querySelectorAll(".optional, .optional-validation");

// 复选框切换时更新元素状态
checkbox.addEventListener('change', function() {
    optionalElements.forEach(el => {
        el.classList.toggle('hidden', this.checked);
    });
});

// 页面加载时同步初始状态
window.addEventListener('load', function() {
    optionalElements.forEach(el => {
        el.classList.toggle('hidden', checkbox.checked);
    });
});

备选方案：修正内联样式写法 #

如果一定要用内联样式，去掉!important并确保选中所有目标元素，同时匹配按钮原有布局：

const checkbox = document.querySelector("input[type=checkbox]");
const optionalElements = document.querySelectorAll(".optional, .optional-validation");

checkbox.addEventListener('change', function() {
    optionalElements.forEach(el => {
        // 用inline-flex匹配按钮原有d-flex布局
        el.style.display = this.checked ? 'none' : 'inline-flex';
    });
});

// 同步初始状态
window.addEventListener('load', function() {
    optionalElements.forEach(el => {
        el.style.display = checkbox.checked ? 'none' : 'inline-flex';
    });
});

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