DjangoでTodoアプリを作成しており、フロントをBootstrap4を利用しています。
その中で、各Todoのチェックボックスをチェックを入れると個別のTodoが完了済みにステータスが変更になるようにすべく、
Bootstrap4のcustom-checkboxを活用しようとしていますが、詰まってしまいました。
下記のようにしたところ、
・リスト上のどこをクリックしても一番上のタスクにしかチェックがつかない。
・チェックボックス以外のところをクリックしてもチェックがついてしまう。
上記2点が要件に満たない状態かつ解決目途が立っていません。
for文でリストを作成していることとチェックボックスがうまくかみ合ってないのでしょうか。
アドバイスいただけますと幸いです。
bootstrap4
1<ul class="list-group"> 2 <li class="list-group-item d-flex justify-content-between align-items-center bg-info font-weight-bold"> 3 未完了 4 </li> 5 {% for todo in todo_list %} 6 <li class="list-group-item d-flex justify-content-between align-items-center"> 7 <div class="custom-control custom-checkbox"> 8 <input type="checkbox" class="custom-control-input" id="customCheck1"> 9 <label class="custom-control-label" for="customCheck1">{{ todo.title }} 10 <span class="badge badge-primary badge-pill">期限:{{ todo.due_date }}</span> 11 </label> 12 </div> 13 </li> 14 {% endfor %} 15</ul> 16 17
フロントエンドフレームワーク:Bootstrap4
アプリケーションフレームワーク:Django
OS:Windows10
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/12/08 14:38