使用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 %}  jQuery(document).ready(function() { $("#checked").change(function() { if(this.checked) { $('#dates').show(); } else { $('#dates').hide(); } }); });  {% endblock %} 

Answer 1

看起来你正在使用Flask-Bootstrap 。

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

其次，您将覆盖scripts块。 这是Flask-Bootstrap包含jQuery的地方。 为了在不丢失基本版本的情况下放置自己的东西，你需要使用Jinja的superfunction 。 它将包含父模板的scripts块以及您自己的scripts块。

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

 {% extends 'bootstrap/base.html' %} {% 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 %} {{ super() }}  {% endblock %}