function checkButton(element) {
var cb = $(element).find("input:checkbox");
if (!$(cb).prop('checked')) {
$(cb).prop('checked', true);
} else {
$(cb).prop('checked', false);
}
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<form method="post" action="">
<div class="list-group" style="cursor: pointer;">
<div class="list-dark list-group-item" onclick="checkButton(this)">
<div class="custom-control custom-checkbox float-right">
<input type="checkbox" class="custom-control-input">
<label class="custom-control-label" style="cursor: pointer;" />
</div>
<a href="">SAS</a>
</div>
<div class="list-dark list-group-item" onclick="checkButton(this)">
<div class="custom-control custom-checkbox float-right">
<input type="checkbox" class="custom-control-input">
<label class="custom-control-label" style="cursor: pointer;" />
</div>
<a href="">SES</a>
</div>
<div class="list-dark list-group-item">Morbi leo risus</div>
<div class="list-dark list-group-item">Porta ac consectetur ac</div>
<div class="list-dark list-group-item">Vestibulum at eros</div>
</div>
<br>
<button type="submit" class="btn btn-secondary float-right">Save</button>
</form>
我正在为列表创建一个带有复选框的列表。在移动设备上,我不能单击列表元素,但可以在PC上单击。我不知道该如何解决。我试图用ul / li替换div,但这是行不通的。