"Franck Magasins a cocher"
Bootstrap 3.0.0 Snippet by malcom007

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
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.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 id="signupbox" style=" margin-top:50px" class="mainbox col-md-8 col-md-offset-2 col-sm-8 col-sm-offset-2">
<div class="panel panel-info">
<div class="panel-heading">
<div class="panel-title">Cochez les 3 magasins que vous utilisez souvent </div>
</div>
<div class="panel-body" >
<form id="signupform" class="form-horizontal" role="form">
<div class="form-group-inline">
<div class="col-xs-12 col-sm-6 col-md-3" style="padding-top:25px;">
<label class="btn btn-primary">
<img src="http://placehold.it/160x100" alt="..." class="img-thumbnail img-check">
<input type="checkbox" name="chk1" id="item4" value="val1" class="hidden" autocomplete="off">
</label>
</div>
</div>
<div class="form-group-inline">
<div class="col-xs-12 col-sm-6 col-md-3" style="padding-top:25px;">
<label class="btn btn-primary">
<img src="http://placehold.it/160x100" alt="..." class="img-thumbnail img-check">
<input type="checkbox" name="chk1" id="item4" value="val1" class="hidden" autocomplete="off">
</label>
</div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
.check
{
opacity:0.5;
color:#996;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
$(document).ready(function(e){
$(".img-check").click(function(){
$(this).toggleClass("check");
});
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Paper Bootstrap Wizard

Questions / Comments: