django BOOTSTRAPのラジオボタンの表示方法

Question

お世話になります。最初に実装したいイメージを以下に示します。

#やりたいこと

ラジオボタンを上記写真のように実装したいです。複数のカテゴリ(300個位あるのでfor文で回す)を表示させたいです。htmlでは実装できたのですがdjangoでの実装ができず困っております。

#ためしたこと

ラジオボタンを装飾したくBOOTSTRAPを利用し以下のようにつくりました。

<div class="btn-group btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-light active">
    <input type="radio" name="options" id="option1" autocomplete="off" checked>RadioA
  </label>
  <label class="btn btn-light">
    <input type="radio" name="options" id="option2" autocomplete="off">RadioB
  </label>
</div>

このコードを実装する事で上記写真のように、アクティブとそうでないラジオボタンを色味を変えてわかりやすく切り替える事ができました。
しかしdjangoに応用しようとした場合以下のように{{ form.category }}と一行で表示してしまうためBOOTSTRAPの切り替え表示ができません。

参考サイト
https://arakan-pgm-ai.hatenablog.com/entry/2019/02/18/090000

#テンプレート

<div class="dummy">
　　{{ form.category }}
</div>

例えばカテゴリデータには以下のようなカテゴリがあるとします。
カテゴリ

　カテゴリ１
カテゴリ２
カテゴリ３

参考までにカテゴリを指定しているformsの中身は以下です。
#form

    category = forms.ModelChoiceField(label='category', queryset=Category.objects.annotate(count=Count('user', filter=Q(user__is_user=True))),required=False,widget=forms.RadioSelect, empty_label='all')

このカテゴリをどのように設定すれば上記写真のラジオボタンのようにアクティブと非アクティブを切り替えて表示する事ができますか？
{{ form.category }}と１文となっておりviewsまたはform.pyにどのように記載すればいいのかわかりません。
宜しくお願いします。

Answer 1

Djangoで同様の問題にぶち当たった時、radioボタンをdivで囲ってなんとかCSSやJSで適用させました。

なんかFormの属性とかでクラス名を付与できる・・・？とかも聞いたことがありますけどやりかたはよくわかりません（）

その時のコード（そのまま使っても動かないと思います）

<div class="area radio radio-checked-1">
     {% for radio in field %}
         {{ radio }}
     {% endfor %}
</div>

  $('input').on('click', function() {
    let target_labels = $(this).closest('.area ').children('label');
    let click_input_index = target_labels.index($(this).parent('label'));
    let add_element_area = $(this).closest('.area ');
    if(click_input_index == 0) {
      add_element_area.addClass('radio-checked-1');
      add_element_area.removeClass('radio-checked-2');
    }else{
      add_element_area.addClass('radio-checked-2');
      add_element_area.removeClass('radio-checked-1');
    }
  });

.area  input {
    display: none;
}
.area radio label {
    position:relative;
    margin-right: 50px;
}
.area .radio label::before{
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 50%;
}
.area .radio.radio-checked-1 label:nth-of-type(1)::after,
.area .radio.radio-checked-2 label:nth-of-type(2)::after {
    content: "";
    display: block;
    position: absolute;
    top: 10px;
    left: 10px;
    border-radius: 50%;
}

ちなみにご存知かもしれませんが {{form.項目名.value}} とやればformの値だけが取れるので、
その取った値を使って実装するほうが普通のJS処理と変わらなくて簡単かもしれません。

Answer 2

と記載すれば、似たような見た目になるはずです。labelタグが1階層増えますが。

<div class="btn-group btn-group-toggle" data-toggle="buttons">
  {% for r in form.category %}
  <label class="btn btn-light active">
    {{ r}}
  </label>
  {% endfor %}
</div>

もし、もっと細かくタグの中身を指定したい場合は、いっそModelChoiceFieldを使うのはやめて、普通にCategoryそのものを渡して、view側で頑張るべきです。

Djangoのformは自分でhtmlを書かずに済むように自動生成してくれるのであり、
タグの中身や階層を細かく厳密に決めたい時に使うようなものではないからです。

ちなみにクラスを含めた属性の値を設定したい場合は、以下のようにRadioSelectクラスに引数として
渡してあげればできます。但し、設定される属性はinputタグのほうにだけです。

    category = forms.ModelChoiceField(label='category', queryset=Category.objects.annotate(count=Count('user', filter=Q(user__is_user=True))),required=False,widget=forms.RadioSelect(attr={"class":"hogeClass"}), empty_label='all')

Comments

[退会済みユーザー]

ありがとうございます。教えて頂いたコードだとカテゴリをラジオボタンを押しても絞り込みがされませんでした。以下のようにlabelを外しても例えば「カテゴリ１」のラジオボタンをクリックしても、カテゴリ１のデータに絞られない状態です。クリックしてもデータ取得でグルグルと回らず反応がないイメージです。

<div class="radio-label">
{% for r in form.category %}
{{ r }}
{% endfor %}
</div>

<div class="radio-label">
{{ form.category }}
</div>

上記だと正しくカテゴリが絞られます。もう少しで出来るのにめちゃめちゃ悔しいです。宜しくお願いします。

[LineOfLightning]

絞り込みされないというのは具体的に提示されたソースのどの項目のことでしょうか？もし、提示されたソースにはない部分の項目のことについてや、提示されていないJavascriptの処理で絞り込みを行われているのであれば、まず、提示してください。提示されなければわかるわけがありません。
また、最初にどのボタンにもactiveが付与されていない等については、別の処理で設定する必要があります。