Odoo V16网站注册表单动态显示/隐藏输入框问题求助

问题核心：你使用的attrs属性仅在Odoo后端表单视图（Form View）中生效，网站前端的QWeb模板不会解析该属性，因此需要通过JavaScript实现复选框控制输入框显示隐藏的逻辑。

解决步骤： #

1. 调整HTML结构：给SIRET字段容器添加Bootstrap的d-none类（默认隐藏），同时修正复选框的默认选中状态写法。
2. 添加JavaScript监听事件：监听复选框的change事件，根据勾选状态切换SIRET容器的显示/隐藏。

完整代码示例： #

<div class="mb-3 field-is_company">
    <label class="form-check-label" for="is_company">Je suis une société</label>
    <!-- 若默认选中可直接加checked属性，动态状态则用t-att-checked="is_company"绑定后端变量 -->
    <input type="checkbox" checked name="is_company" id="is_company" class="form-check-input"/>                
</div>            
<div class="mb-3 field-siret d-none" id="siret_container">
    <label for="siret">Votre SIRET</label>
    <input type="text" name="siret" t-att-value="siret" id="siret" class="form-control form-control-sm" required="required"/>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const isCompanyCheckbox = document.getElementById('is_company');
    const siretContainer = document.getElementById('siret_container');
    
    // 初始状态：若复选框默认选中，显示SIRET容器
    if (isCompanyCheckbox.checked) {
        siretContainer.classList.remove('d-none');
    }
    
    // 监听复选框状态变化
    isCompanyCheckbox.addEventListener('change', function() {
        if (this.checked) {
            siretContainer.classList.remove('d-none');
        } else {
            siretContainer.classList.add('d-none');
            // 可选：取消勾选时清空SIRET输入框内容
            document.getElementById('siret').value = '';
        }
    });
});
</script>

补充说明： #

• d-none是Odoo默认集成的Bootstrap隐藏类，直接即可使用。
• 若复选框的选中状态为后端动态传递，将checked替换为t-att-checked="is_company"，并确保后端将is_company变量传入模板。
• 取消勾选时清空输入框为可选操作，可根据需求决定是否保留。

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