Twitter Bootstrap + buttons-checkbox

by A B

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css">
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min.js"></script>
<form name="myForm" id="myForm" method="post" action="/">
    <div class="control-group">
        <div class="controls">
            <div class="btn-group btn-group-vertical" data-toggle="buttons-checkbox">
                <button type="button" class="btn btn-info btn-small" value="1" id="LanguagesAvailable_0__Code"
                name="LanguagesAvailable[0].Code">Value 1</button>
                <button type="button" class="btn btn-info btn-small" value="2"
                id="LanguagesAvailable_1__Code" name="LanguagesAvailable[1].Code">Value 2</button>
                <button type="button" class="btn btn-info btn-small" value="3"
                id="LanguagesAvailable_2__Code" name="LanguagesAvailable[2].Code">Value 3</button>
                <button type="button" class="btn btn-info btn-small" value="4"
                id="LanguagesAvailable_3__Code" name="LanguagesAvailable[3].Code">Value 4</button>
            </div>
        </div>
    </div>
    <hr />
    <input type="checkbox" id="LanguagesAvailable_0__Description" name="LanguagesAvailable[0].Description"
    value="1" />Value 1
    <input type="checkbox" id="LanguagesAvailable_1__Description" name="LanguagesAvailable[1].Description"
    value="2" />Value 2
    <input type="checkbox" id="LanguagesAvailable_2__Description" name="LanguagesAvailable[2].Description"
    value="3" />Value 3
    <hr />
    <div class="control-group">
        <div class="controls">
            <div class="btn-group btn-group-vertical" data-toggle="buttons-checkbox">
<input type="checkbox" id="LanguagesAvailable_0__Test" />
    <label class="btn" for="LanguagesAvailable_0__Test">Value 1</label>                
                
            </div>
        </div>
    </div>
    
    <hr />
    
    <input type="submit"...

CSS

.btn-group > input {
    display: none;
}

.btn-group input:first-child + .btn {
     /* This is an actual copy/paste of the .btn-group .btn:first-child style */
    border-bottom-left-radius: 4px;
    border-top-left-radius: 4px;
    margin-left: 0;
}

input:checked + label.btn {
    /* This is an actual copy/paste of the .btn:active style */
    background-color: #E6E6E6;
    background-image: none;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) inset, 0 1px 2px rgba(0, 0, 0, 0.05);
    color: rgba(0, 0, 0, 0.5);
    outline: 0 none;
}

input[disabled] + label.btn {
    /* This is an actual copy/paste of the .btn:disabled style */
    background-color: #E6E6E6;
    background-image: none;
    box-shadow: none;
    cursor: default;
    opacity: 0.65;
}

JavaScript

$(document).on('submit', '#myForm', function (e) {
    alert('Form submission...');
    e.preventDefault();
    var submittedData = $(this).serialize();
    alert("values:" + submittedData);
});