Bootstrap Snippet Panel Checkbox using HTML CSS Bootstrap jQuery

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.3/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/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="scoring-telkomsel">
            <div class="panel panel-primary">
                <div class="panel-heading"></div>
                <div class="panel-body">
                    <div class="form-group text-center">
                        <div class="col-sm-4 col-md-4">
                        <input type="checkbox" name="fancy-checkbox-danger-custom-icons" autocomplete="off" />
                        <div class="btn-group">
                            <label for="fancy-checkbox-danger-custom-icons" class="btn-v1 btn btn-primary">
                                <span class="home-glyph glyphicon glyphicon-minus"></span>
                            </label>
                            <label for="fancy-checkbox-danger-custom-icons" class="btn btn-default active" disabled>
                                Ver1
                            </label>
                        </div>
                        </div>
                        <div class="col-sm-4 col-md-4">
                        <input type="checkbox" name="fancy-checkbox-danger-custom-icons" autocomplete="off" />
                        <div class="btn-group">
                            <label for="fancy-checkbox-danger-custom-icons" class="btn-v2 btn btn-primary">
                                <span class="office-glyph glyphicon glyphicon-minus"></span>
                            </label>
                            <label for="fancy-checkbox-danger-custom-icons" class="btn btn-default active" disabled>
                                Ver2
                            </label>
                        </div>
                        </div>
                        <div class="col-sm-4 col-md-4">
                        <input type="checkbox" name="fancy-checkbox-danger-custom-icons" autocomplete="off" />
                        <div class="btn-group">
                            <label for="fancy-checkbox-danger-custom-icons" class="btn-v3 btn btn-primary">
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
.panel-download{
    /*margin: 20px;*/
    padding-top: 40px;
    margin: 40px;
    border: 2px #666;
    box-shadow: 0 0 27px rgba(0,0,0,.25);
}
.panel-group{
    padding: 20px;    
}
.scoring-telkomsel{
    padding: 20px;
    margin: 20px;
    box-shadow: 0 0 27px rgba(0,0,0,.25);
}
.score{
    padding-top: 4em;
}
.form-group input[type="checkbox"] {
    display: none;
}
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
26
27
28
29
30
31
32
33
34
35
36
37
$(function () {
    var x;
   var home = 'test';
   var office = null;
   var telpon = 'test';
   var data = {
       "status" : 200,
       "data": [{
           "nama": "elkin",
           "id_number": "121212",
           "alamat": "jl beringin",
       }, {
           "nama": "suketi",
           "id": "44444",
           "alamat": "jl sawo",
       },
       {
           "nama": "test",
           "id_number": "123",
           "alamat": "jl sawo",
       }]
   };
   $('#requestTelkomsel').click(function (e){
    e.preventDefault();
    var $this = $(this);
    var produkType = 'tsel';
    $this.button('loading');
    if (home === null )
    {
        $('.btn-v1').removeClass('btn-primary').addClass('btn-danger');
        $('.home-glyph').removeClass('glyphicon-minus').addClass('glyphicon-remove');
    } else {
        $('.btn-v1').removeClass('btn-primary').addClass('btn-success');
        $('.home-glyph').removeClass('glyphicon-minus').addClass('glyphicon-ok');
    }
    if(office === null)
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Panel Checkbox"
Bootstrap 3.0.3 Snippet by elkhunsu

Related: See More

Questions / Comments:

"Panel Checkbox" Bootstrap 3.0.3 Snippet by elkhunsu

Related: See More

Questions / Comments:

"Panel Checkbox"
Bootstrap 3.0.3 Snippet by elkhunsu