JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css">
<label class="btn btn-toggle" for="my-single-toggle">
<input type="checkbox" id="my-single-toggle" />
Toggle meh!
</label>
<div class="btn-group">
<label class="btn btn-toggle" for="multiple-toggle-1">
<input type="checkbox" id="multiple-toggle-1" />
One
</label>
<label class="btn btn-toggle" for="multiple-toggle-2">
<input type="checkbox" id="multiple-toggle-2" />
Two
</label>
<label class="btn btn-toggle" for="multiple-toggle-3">
<input type="checkbox" id="multiple-toggle-3" />
Three
</label>
</div>
<div class="btn-group">
<label class="btn btn-toggle" for="multiple-exclusive-toggle-1">
<input type="radio" name="exclusive" id="multiple-exclusive-toggle-1" />
One
</label>
<label class="btn btn-toggle" for="multiple-exclusive-toggle-2">
<input type="radio" name="exclusive" id="multiple-exclusive-toggle-2" />
Two
</label>
<label class="btn btn-toggle" for="multiple-exclusive-toggle-3">
<input type="radio" name="exclusive" id="multiple-exclusive-toggle-3" />
Three
</label>
</div>
CSS
.btn-toggle input {
display: none;
}
JavaScript
$(document).ready(function($) {
function updateBtnState(btn, input, updateRadios) {
btn.toggleClass('active', input.prop('checked'));
btn.toggleClass('disabled', input.prop('disabled'));
}
$(document).live('change', '.btn-toggle input', function(e) {
var input = $(e.target);
// radio button that are automatically unchecked dont trigger a change event
if (input.is(':radio')) {
var selector = 'input[type="radio"][name="' + input.attr('name') + '"]';
$(selector).each(function() {
var input = $(this),
btn = input.parents('.btn-toggle');
updateBtnState(btn, input);
});
} else {
var btn = input.parents('.btn-toggle');
updateBtnState(btn, input);
}
});
$('.btn-toggle').each(function() {
var btn = $(this),
input = btn.find('input');
updateBtnState(btn, input);
});
});