Скрытие полей формы Django с помощью Jquery, но не скрытие меток формы (с помощью crispy forms)

Я пытаюсь скрыть определенные поля в форме на основе выбора поля Select. Например, для поля Select "system_description_1" При выборе опции "Direct" следующие поля должны быть скрыты (также скрыты по умолчанию при загрузке страницы), но при выборе "Indirect" поля должны стать видимыми. Эта функция работает абсолютно нормально, используя Jquery, но она все еще показывает метку формы, она скрывает поле, но не метку поля, как мне их скрыть? Я хочу скрыть метку поля, когда я скрываю поле, но показать метку поля, когда я снимаю или показываю их.

Поля: secondary_circulation_pump_model вторичный_циркуляционный_насос_емкость

models.py:

class Systemprofile(models.Model):
    SYSTEMDESC1 = (
        ('direct', 'Direct'),
        ('indirect', 'Indirect')
     )
    SECONDARYPUMPMODEL = (
        ('grundfos', 'Grundfos'),
        ('cnp', 'CNP'),
    ('others', 'Others')
    )
    SECONDARYPUMPCAPACITY = (
        ('ltr-hr', 'Ltr/hr'),
        ('others', 'Others')
     )
  name = models.CharField(max_length=255, null=True)
  system_description_1 = models.CharField(blank=True, max_length=255, null=True, choices=SYSTEMDESC1)
  secondary_circulation_pump_model = models.CharField(blank=True, max_length=255, null=True, choices=SECONDARYPUMPMODEL)
  secondary_circulation_pump_capacity = models.CharField(blank=True, max_length=255, null=True, choices=SECONDARYPUMPCAPACITY)

forms.py

class CreateSystemprofile(ModelForm):
class Meta:
    model = Systemprofile
    fields = '__all__'

system_profile.html

{% extends 'base.html' %}
{% load static %}
{% block content %}
{% load crispy_forms_tags %}
<script>
function Hide() {

    if(document.getElementById('id_system_description_1').options[document.getElementById('id_system_description_1').selectedIndex].value == "Direct") {
        document.getElementById('id_secondary_circulation_pump_model').style.display = 'none';
        document.getElementById('id_secondary_circulation_pump_capacity').style.display = 'none';
        
    } else {
        document.getElementById('id_secondary_circulation_pump_model').style.display = '';
        document.getElementById('id_secondary_circulation_pump_capacity').style.display = '';
        
    }
}

window.onload = function() {
    document.getElementById('id_secondary_circulation_pump_model').style.display = 'none';
    document.getElementById('id_secondary_circulation_pump_capacity').style.display = 'none';
    document.getElementById('id_system_description_1').onchange = Hide;
};
</script>
    <br>
<div class="row">
    <div class="col-md-6">
        <div class="card card-body">
            <p><b>Add/Update System Profile:</b></p>
            <form action="" method="POST">
                <table border="1">
                {% csrf_token %}
                     <table>
                        <div class="form-group">
                         System Description 1: <select id="id_system_description_1" onchange="Hide()">
                            <option value="">select</option>
                            <option value="Direct">Direct</option>
                            <option value="Indirect">Indirect</option>
                        </select></div></table>
                     
                    <table>
                         {{ form.name|as_crispy_field }}
                         {{ form.secondary_circulation_pump_model|as_crispy_field }}
                         {{ form.secondary_circulation_pump_capacity|as_crispy_field }}
                         </table>
                        <hr>
                <input class="btn btn-sm btn-info" type="submit" name="submit">
            </form>

        </div>
    </div>

</div>

{% endblock %}

Теперь посмотрите вывод, если я показываю поле, то все абсолютно нормально, то есть когда я выбираю опцию "Indirect", но когда я выбираю опцию "Direct", то отображается метка поля, пожалуйста, смотрите изображение ниже:

КОГДА Я ПРЯЧУСЬ:

When I Hide

КОГДА Я ПОКАЗЫВАЮ:

When I Show

ПОЖАЛУЙСТА, ПОМОГИТЕ МНЕ С JQUERY ИЛИ CSS ИЛИ ЛЮБЫМ ДРУГИМ СПОСОБОМ РЕШИТЬ ЭТУ ПРОБЛЕМУ.

Этот метод jQuery для выбора с помощью метки:

$('label[for="id_secondary_circulation_pump_model"]').css('display', 'none');
$('label[for="id_secondary_circulation_pump_capacity"]').css('display', 'none');
Вернуться на верх