チェックボックスを持つリストで、リストをクリックしてもチェックが入るようにしたい。

前提・実現したいこと

チェックボックスを含むリスト表をつくっているのですが、リスト（セル）をクリックしてもチェックボックスにチェックが入るようにしたいのですが、現状リストをクリックでチェックがはいるようにはなったのですが、チェックボックスそのものを押したときにチェックが入らなくなってしまいます。チェックを押してもリストを押してもチェックが入るようにしたいです。
ご教授よろしくお願いいたします。

発生している問題・エラーメッセージ

チェックを押すと、チェックボックスにチェックが入らない

該当のHTML

<div class="col-md-6 offset-md-3">
							<div class="card" style="margin:50px 0">
								<div class="card-header">☑チェック項目</div>

								<ul class="list-group list-group-flush">

									<li class="list-group-item">
										窓施錠
										<label class="checkbox">
											<input type="checkbox" id="check" />
											<span class="danger"></span>
										</label>
									</li>
									<li class="list-group-item">
										消灯
										<label class="checkbox">
											<input type="checkbox" />
											<span class="danger"></span>
										</label>
									</li>
									<li class="list-group-item">
										エアコン
										<label class="checkbox">
											<input type="checkbox" />
											<span class="danger"></span>
										</label>
									</li>
									<li class="list-group-item">
										セコム起動
										<label class="checkbox">
											<input type="checkbox" />
											<span class="danger"></span>
										</label>
									</li>
									<li class="list-group-item">
										セコム起動
										<label class="checkbox">
											<input type="checkbox" />
											<span class="danger"></span>
										</label>
									</li>
									<li class="list-group-item">
										エアコン
										<label class="checkbox">
											<input type="checkbox" />
											<span class="danger"></span>
										</label>
									</li>
								</ul>
							</div>
						</div>
										</li>

該当のJavaScript

$(document).ready(function() {
    
        $('li').click(function(event) {
            if (event.target.type !== 'checkbox') {
                $(':checkbox', this).trigger('click');
                }
             
        });
        
    });

@keyframes check {0% {height: 0;width: 0;}
25% {height: 0;width: 10px;}
50% {height: 20px;width: 10px;}
}
.checkbox{background-color:#fff;display:inline-block;height:28px;margin:0 .25em;width:28px;border-radius:4px;border:1px solid #ccc;float:right}
.checkbox span{display:block;height:28px;position:relative;width:28px;padding:0}
.checkbox span:after{-moz-transform:scaleX(-1) rotate(135deg);-ms-transform:scaleX(-1) rotate(135deg);-webkit-transform:scaleX(-1) rotate(135deg);transform:scaleX(-1) rotate(135deg);-moz-transform-origin:left top;-ms-transform-origin:left top;-webkit-transform-origin:left top;transform-origin:left top;border-right:4px solid #fff;border-top:4px solid #fff;content:'';display:block;height:20px;left:3px;position:absolute;top:15px;width:10px}
.checkbox span:hover:after{border-color:#999}
.checkbox input{display:none}
.checkbox input:checked + span:after{-webkit-animation:check .8s;-moz-animation:check .8s;-o-animation:check .8s;animation:check .8s;border-color:#555}
.checkbox input:checked + .default:after{border-color:#444}
.checkbox input:checked + .primary:after{border-color:#2196F3}
.checkbox input:checked + .success:after{border-color:#8bc34a}
.checkbox input:checked + .info:after{border-color:#3de0f5}
.checkbox input:checked + .warning:after{border-color:#FFC107}
.checkbox input:checked + .danger:after{border-color:#f44336}

試したこと

原因がチェックボックスを押すと、二重で処理が走っていると考え、if (event.target.type !== 'checkbox') でチェックボックスが押された場合は処理を行わないようにしたのですがうまく動きません。
何卒宜しくお願い致します。

m.ts10806

2020/09/17 07:58

htmlがぐちゃっとなってるのでコードフォーマット(適切なインデント)調整してください。あと、bootstrapでしょうか？バージョンも記載してください

kazu5942

2020/09/17 08:34

ご回答いただきまして誠にありがとうございます。対応させていただきました。また、Bootstrap4です。一旦cssの適用をなくしたところ、うまく動作したので、その当たりが原因だと考えたのですが、どの部分が悪さをしているのかわかりませんでした。cssのコードも追加しておきます。

行動規範の内容に同意します

回答1件

ベストアンサー

パターン1 <label>タグのみで解決する
※文法上よくないのでおすすめできません

HTML
1	<!-- liの外にlabelを指定 -->
2	<label for="check1">
3		<li class="list-group-item">
4			窓施錠
5			<input type="checkbox" id="check1" />
6			<span class="danger"></span>
7		</li>
8	</label>

パターン2 <li>タグのイベントで処理

JavaScript
1	$(function(){
2	    $('li').click(function(){
3	    	var c = $(this).find("input:checkbox");
4    		c.prop('checked', !c.prop("checked"));
5	    });
6	});

どちらでも動きます。

HTML
1	<!-- 文字列を含みlabelを指定 -->
2	<li class="list-group-item">
3		<label for="check2">
4			消灯
5			<input type="checkbox" id="check2" />
6			<span class="danger"></span>
7		</label>
8	</li>
9	<!-- 文字列を含まずlabelを指定 (こちらで書かれていた意味は？)-->
10	<li class="list-group-item">
11		エアコン
12		<label class="checkbox">
13			<input type="checkbox" />
14			<span class="danger"></span>
15		</label>
16	</li>