"Hidden checkbox buttons"
Bootstrap 4.0.0 Snippet by edsb

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
.cb-checkbox {
visibility: hidden;
position: absolute;
}
.no-hover.btn-outline-primary:hover {
color: #0275d8;
background-color: transparent;
border-color: #0275d8;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
$(".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);
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Paper Kit Pro
Funky Radio/Checkbox Buttons V2.0
Image Checkbox

Questions / Comments: