使用 Flask Jinja2 和 WTForms 隐藏表单组

我试图根据表单另一部分中复选框的状态显示或隐藏表单字段。我认为我可以使用 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 %}

看起来你正在使用Flask-Bootstrap http://pythonhosted.org/Flask-Bootstrap/.

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

其次，你重写了scripts堵塞。这就是 Flask-Bootstrap 包含 jQuery 的地方。为了把你自己的东西放在那里而不丢失基本版本，你需要使用Jinja's super功能 http://jinja.pocoo.org/docs/dev/templates/#super-blocks。它将包括父模板的scripts和你自己的一起阻止。

进行这些更改后，您的模板应该类似于

{% 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 %}