1

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>

I'm making a list with a checkbox for the rows. From mobile, I cannot click on the list elements but on the pc I can. I don't know how to fix this. I tried to replace divs with ul/li but it doesn't work.

alex3025
  • 109
  • 4
  • 21
  • Please clarify "from mobile": Android or iPhone? Which mobile browser? – JDB Jul 18 '19 at 17:41
  • 1
    Possible duplicate of [onClick not working on mobile (touch)](https://stackoverflow.com/questions/22015908/onclick-not-working-on-mobile-touch) – JDB Jul 18 '19 at 17:42
  • @JDB On Android with Brave browser. Even the animation doesn't work. – alex3025 Jul 18 '19 at 18:16
  • Does it help to use the `touchstart` handler instead? – JDB Jul 18 '19 at 18:40
  • See https://developer.mozilla.org/en-US/docs/Web/API/Touch_events – JDB Jul 18 '19 at 18:41
  • @JDB No, it only works on pc. – alex3025 Jul 18 '19 at 18:41
  • Very strange - that should work. My guess is that there's an error somewhere on your page which is preventing any JS from loading at all, in which case none of your code is working (which might explain why the animations are failing). I've never used Brave on a mobile device... but I'd guess that it's possible to open debugging tools for it, which should help you find the error. – JDB Jul 18 '19 at 18:55
  • Yeah - here's how to attach to the debugger for Android: https://github.com/brave/browser-android-tabs#debugging – JDB Jul 18 '19 at 18:56
  • @JDB I tried now on Chrome (on Android) and it works. Even without the jQuery handler. – alex3025 Jul 18 '19 at 19:01
  • Yeah... sounds like there's something in your JS that Brave doesn't like. I can't really help you further, unfortunately, since I know nothing about Brave. – JDB Jul 18 '19 at 19:02
  • @JDB Thanks anyway. I think none of my clients will use brave so, relax. – alex3025 Jul 18 '19 at 19:04

0 Answers0