javascript - 使用 Javascript 一个接一个地添加 Django MultipleChoiceField

Question

我正在研究基于以下形式的 Django 视图：

class MyForm(forms.Form):
    def __init__(self, data, examen, *args, **kwargs):
        super(MyForm, self).__init__(data, *args, **kwargs)

        self.fields['q1'] = forms.MultipleChoiceField(
                label=mark_safe("Label question 1"),
                required=True,
                widget=forms.CheckboxSelectMultiple,
                choices=(('1', 'answer 1'), ('2', 'answer 2'), ('3', 'answer 3'))
                )
        self.fields['q2'] = forms.MultipleChoiceField(
                label=mark_safe("Label question 2"),
                required=True,
                widget=forms.CheckboxSelectMultiple,
                choices=(('1', 'answer 4'), ('2', 'answer 5'), ('3', 'answer 6'))
                )
        ... #TODO : add questions q3 to q9
        self.fields['q10'] = forms.MultipleChoiceField(
                label=mark_safe("Label question 10"),
                required=True,
                widget=forms.CheckboxSelectMultiple,
                choices=(('1', 'answer 28'), ('2', 'answer 29'), ('3', 'answer 30'))
                )

我想self.fields['q1']用[submit]按钮显示在单个视图上。这个想法是让用户选择他认为正确的答案并点击[提交]按钮。之后self.fields['q1']将变为只读，并self.fields['q2']在下方再次显示[submit]按钮... 和儿子 on until self.fields['q10']。

我确实相信实现这一目标的唯一方法是使用Javascript（甚至是 JQuery 或任何其他库）。问题是我对 Javascript 不是很熟悉，并且很乐意了解有关如何解决该问题的提示。

谢谢你能做的！

PS：如果您认为这不是实现我的目标的正确方法，我很乐意更改我的 Django 设计。

编辑 29/11/2019：我当前的模板如下所示：

<form action="{% url 'quizz' my_exam %}" method="post">

    {% csrf_token %}
    {% for field in form %}

        {% ifequal forloop.counter0 0 %}
        <div class="card text-white bg-primary mb-3">
            <div class="card-body">
                <h6 class="card-title">{{ field.label|linebreaksbr }}</h6>
            </div>
        </div>
        {% else %}
            <div class="card">
                <h5 class="card-header">{{field.name}}</h5>
                <div class="card-body">
                    <h6 class="card-title">{{ field.label|linebreaksbr }}</h6>
                    <p class="card-text">{{ field }}</p>
                </div>
            </div>
        {% endifequal %}


    {% endfor %}

    <input type="submit" value="Submit" class="btn btn-primary"/>

</form>

编辑 30/11/2019：基于@Phanti 建议的新模板：

<script>
{% block jquery %}

    $("#submit_2").click(function() {
        $("#questions_container").find(":hidden").show().next();
    }

{% endblock %}
</script>


{% block content %}
<form action="{% url 'quizz' exam %}" method="post">

    {% csrf_token %}

    <div id="questions_container">
    {% for field in form %}

        {% ifequal forloop.counter 1 %}
        <div class="card text-white bg-primary mb-3">
            <div class="card-body">
                <h6 class="card-title">{{ field.label|linebreaksbr }}</h6>
            </div>
        </div>
        {% else %}              
                {% ifequal forloop.counter 2 %}
                    <div id="question_{{ forloop.counter }}" class="card" style="display: block;">
                        <h5 class="card-header">{{field.name}}</h5>
                        <div class="card-body">
                            <h6 class="card-title">{{ field.label|linebreaksbr }}</h6>
                            <p class="card-text">{{ field }}</p>
                        </div>
                    </div>

                    <input id="submit_{{ forloop.counter }}" value="Valider" class="btn btn-primary" style="display: block;"/>
                {% else %}

                    <div id="question_{{ forloop.counter }}" class="card" style="display: none;">
                        <h5 class="card-header">{{field.name}}</h5>
                        <div class="card-body">
                            <h6 class="card-title">{{ field.label|linebreaksbr }}</h6>
                            <p class="card-text">{{ field }}</p>
                        </div>
                    </div>


                    {% if not forloop.last %}
                        <input id="submit_{{ forloop.counter }}" value="Submit" class="btn btn-primary" style="display: none;"/>
                    {% else %}
                        <input id="submit_{{ forloop.counter }}" type="submit" value="Submit" class="btn btn-primary" style="display: none;"/>
                    {% endif %}

                {% endifequal %}

        {% endifequal %}      

    {% endfor %}
    </div>

</form>
{% endblock %}

标签： javascriptdjango