Bootstrap4のcustom-checkboxについて

Question

DjangoでTodoアプリを作成しており、フロントをBootstrap4を利用しています。
その中で、各Todoのチェックボックスをチェックを入れると個別のTodoが完了済みにステータスが変更になるようにすべく、

Bootstrap4のcustom-checkboxを活用しようとしていますが、詰まってしまいました。
下記のようにしたところ、
・リスト上のどこをクリックしても一番上のタスクにしかチェックがつかない。
・チェックボックス以外のところをクリックしてもチェックがついてしまう。

上記2点が要件に満たない状態かつ解決目途が立っていません。
for文でリストを作成していることとチェックボックスがうまくかみ合ってないのでしょうか。
アドバイスいただけますと幸いです。

<ul class="list-group">
  <li class="list-group-item d-flex justify-content-between align-items-center bg-info font-weight-bold">
    未完了
  </li>
  {% for todo in todo_list %}
  <li class="list-group-item d-flex justify-content-between align-items-center">
   <div class="custom-control custom-checkbox">
    <input type="checkbox" class="custom-control-input" id="customCheck1">
    <label class="custom-control-label" for="customCheck1">{{ todo.title }}
    <span class="badge badge-primary badge-pill">期限:{{ todo.due_date }}</span>
    </label>
   </div>
  </li>
  {% endfor %}
</ul>

フロントエンドフレームワーク：Bootstrap4
アプリケーションフレームワーク：Django
OS:Windows10

Answer 1

リスト上のどこをクリックしても一番上のタスクにしかチェックがつかない。

これはinputタグのidが重複してしまうのが原因だと思います。
{{ forloop.counter }}なんかを使って重複しないようなidのつけ方をしたほうがいいですね。
組み込みタグとフィルタ|for

チェックボックス以外のところをクリックしてもチェックがついてしまう。

これはBootstrapの仕様だと思います。
チェックボックスだけに反応するようにできるのかはわからないです。すみません。

Comments

[TAKASHIARAKI]

mistnさん
ありがとうございます！いただいた内容で解決いたしました。
また参考リンクもありがとうございます。公式ドキュメントからきちんと探せるようにならなきゃダメですね。