🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中!

\teratail特別グッズやAmazonギフトカード最大2,000円分が当たる!/

詳細はこちら
Django

DjangoはPythonで書かれた、オープンソースウェブアプリケーションのフレームワークです。複雑なデータベースを扱うウェブサイトを開発する際に必要な労力を減らす為にデザインされました。

checkbox

checkboxは、GUIのエレメントです。また、HTML<input>タグのtype属性で扱われる値を指します。

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

Q&A

解決済

1回答

677閲覧

Bootstrap4のcustom-checkboxについて

TAKASHIARAKI

総合スコア6

Django

DjangoはPythonで書かれた、オープンソースウェブアプリケーションのフレームワークです。複雑なデータベースを扱うウェブサイトを開発する際に必要な労力を減らす為にデザインされました。

checkbox

checkboxは、GUIのエレメントです。また、HTML<input>タグのtype属性で扱われる値を指します。

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

0グッド

0クリップ

投稿2019/12/07 15:08

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

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

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

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

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

投稿2019/12/08 06:05

mistn

総合スコア1191

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

TAKASHIARAKI

2019/12/08 14:38

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.36%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問