<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <div class="col"></div> <div class="col-8" id="main"> <h2>Hacked JQuery way</h2> <input type="checkbox" id="test-checkbox" name="test" class="cb-checkbox"> <label for="test-checkbox" class="btn btn-outline-primary btn-sm">Test text</label><!-- add JS to add no-hover class when on touchscreen --> <!-- Delete for production --> <span id="test-if-checked" style="display:none;">Checked</span> <!-- End delete for production --> <br /> <h2>Bootstrap docs way, not working</h2> <label class="btn btn-outline-primary btn-sm"> <input type="checkbox" autocomplete="off" data-toggle="button"> Checkbox 1 (pre-checked) </label> </div> <div class="col"></div> </div> </div>

.cb-checkbox { visibility: hidden; position: absolute; } .no-hover.btn-outline-primary:hover { color: #0275d8; background-color: transparent; border-color: #0275d8; }

$(".cb-checkbox").change(function() { // Old way - before discovered bootstrap has this built in //$("label[for='"+$(this).attr("id")+"']").toggleClass("selected-button"); $("label[for='"+$(this).attr("id")+"']").button('toggle'); $("#test-if-checked").hide(); if(this.checked) { $("#test-if-checked").show(); } }); //first attempt at doing the below in jquery - seems to work. Do we need to remove event listener? $(document).on('touchstart', function(){ $("label").addClass("no-hover"); }); // stolen from tutorial and modified //document.addEventListener('touchstart', function addtouchclass(e){ // first time user touches the screen // document.getElementsByTagName('label').classList.add('no-hover');// add "no-hover" class to all labels using classList API // document.removeEventListener('touchstart', addtouchclass, false) // de-register touchstart event //}, false);