如何使用 WTForms 单独渲染单选按钮？

Question

我想要一个带有一组单选按钮的表单，每个单选按钮控制几个其他控件的启用，并且我希望其他控件与单选按钮穿插。简而言之，我想要这样的东西：

• 单选按钮
  • 复选框
• 单选按钮
  • 选择列表
• 单选按钮

每个单选按钮在其下方启用控件。

问题是 Jinja2 想要将单选按钮呈现为一个组，它们之间没有任何内容；似乎没有一种干净的方式来引用各个按钮元素。

如何在 Jinja2 代码中呈现单个单选按钮？我正在使用 WTForms 2.3.3 和 Flask 2.0.1。

作为参考，这里是 FlaskForm：

def list_sellers():
    c1 = aliased(Contact)
    c2 = aliased(Contact)
    return db.session.query(c2).
        select_from(c1).join(c2, c2.id==c1.seller_id).
        filter(c1.seller_id != None)
    
class ExportForm(FlaskForm):
    filtered = BooleanField('Apply Filters')
    sellers_filter = RadioField(
        'Filter by Seller',
        choices=[
            ('all', 'All Sellers'),
            ('select', 'Select Seller'),
            ('none', 'No Seller')
        ],
        validators=[Optional()]
    )
    seller = QuerySelectField(
        'Seller',
        query_factory=list_sellers,
        allow_blank=False,
        validators=[Optional()],
        render_kw={'class': 'form-select'},
    )
    submit = SubmitField('Download')

Answer 1

我得到了一些工作，但恕我直言，它真的很难看：

{% for subfield in form.sellers_filter %}
  {% if subfield.id.endswith('0') %}
    <div class="form-group col-4">
      {{ subfield.label }} {{ subfield }}
    </div>
  {% endif %}
  {% if subfield.id.endswith('1') %}
    <div class="form-group col-4">
      {{ subfield.label }} {{ subfield }}
      {{ form.seller }}
    </div>
  {% endif %}
  {% if subfield.id.endswith('2') %}
    <div class="form.group col-4">
      {{ subfield.label }} {{ subfield }}
    </div>
  {% endif %}
{% endfor %}

Answer 2

根据我对您的问题的理解，它在某种程度上是重复的here

您需要为您的目的编写 javascript 代码。