无法通过手机点击div

时间:2019-07-18 17:38:14

标签: javascript html css bootstrap-4

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,但这是行不通的。

0 个答案:

没有答案