jquery - 使用 Flask Jinja2 和 WTForms 隐藏表单组

Question

我试图根据表单另一部分中复选框的状态显示或隐藏表单字段。我认为我可以使用 jQuery .show() 或 .hide() 相对轻松地完成此操作，但到目前为止我运气不佳。有什么想法吗？

表单类:

class MyForm(Form):
    checked = BooleanField('Check this box:')
    date = DateField('Date:', format='%Y-%m-%d', id="dates")
    submit = SubmitField('Submit')

模板:

{% import "bootstrap/wtf.html" as wtf %}

{% block content %}

{{ form.hidden_tag() }}
{{ wtf.form_field(form.checked) }}
{{ wtf.form_field(form.date) }}
{{ wtf.form_field(form.submit) }}

{% endblock %}

{% block scripts %}

<script type="text/javascript">
jQuery(document).ready(function() {
  $("#checked").change(function() {
    if(this.checked) {
        $('#dates').show();
    } else {
      $('#dates').hide();
    }
  });
});
</script>

{% endblock %}

Answer 1

您似乎正在使用 Flask-Bootstrap .

首先，确保您的模板中包含 {% extends 'bootstrap/base.html' %}。如果没有这一行，您将失去 Flask-Bootstrap 模板中包含的所有内容，例如 jQuery。

其次，您要覆盖 scripts block 。这就是 Flask-Bootstrap 包含 jQuery 的地方。为了将您自己的东西放在那里而不丢失基本版本，您需要使用 Jinja's super function 。它将包含父模板的 scripts block 以及您自己的 block 。

进行这些更改后，您的模板应该看起来像这样

{% extends 'bootstrap/base.html' %}

{% import "bootstrap/wtf.html" as wtf %}

{% block content %}
    <form>
        {{ form.hidden_tag() }}
        {{ wtf.form_field(form.checked) }}
        {{ wtf.form_field(form.date) }}
        {{ wtf.form_field(form.submit) }}
    </form>
{% endblock %}

{% block scripts %}
    {{ super() }}

    <script>
        jQuery(document).ready(function() {
            $("#checked").change(function() {
                if (this.checked) {
                    $('#dates').show();
                } else {
                    $('#dates').hide();
                }
            });
        });
    </script>
{% endblock %}