Django表单字段完全隐藏咨询：如何隐藏字段及对应标签

你现在的问题是只隐藏了输入控件，但标签还留在页面上对吧？这是因为输入框和它的标签都包裹在同一个.form-group容器里，只隐藏输入框自然会剩下标签。咱们只需要修改JS代码，找到输入框对应的父级.form-group元素，把整个容器隐藏掉就行。

修改后的JS代码 #

$('#id_category').change(function () {
    var valueSelected = $(this).val();
    // 获取对应的form-group容器
    const roomsGroup = $('#id_rooms').closest('.form-group');
    const seriesGroup = $('#id_series').closest('.form-group');

    if (valueSelected === '1' || valueSelected === '2') {
        roomsGroup.hide();
        seriesGroup.hide();
    } else {
        roomsGroup.show();
        seriesGroup.show();
    }
});

代码解释 #

• 使用jQuery的.closest('.form-group')方法，能快速找到当前输入框最近的.form-group父元素，这个容器正好包含了字段的标签和输入控件。
• 直接对这个容器调用.hide()/.show()，就能实现整个字段（标签+输入框）的显示/隐藏，完美解决你的问题。

额外优化建议 #

如果页面加载时默认需要隐藏这些字段（比如默认选中的分类是1或2），可以在页面初始化时触发一次change事件，避免页面加载后字段还显示的情况：

// 页面加载完成后触发一次change事件
$(document).ready(function() {
    $('#id_category').trigger('change');
});

这样不管页面初始选中的分类是什么，字段都会正确显示或隐藏啦。

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