Toggle Buttons - Bootstrap on/off
Toggle Buttons - Bootstrap on/off
HTML
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="http:////netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
<script src="http:////netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<div class="btn-group" data-toggle="buttons" data-toggle-default-class="btn-default">
<label class="btn btn-xs btn-default" data-toggle-class="btn-success">
<input type="radio" name="status" value="1" id="status-published" />
Published
</label>
<label class="btn btn-xs btn-success active" data-toggle-class="btn-danger">
<input type="radio" name="status" value="0" id="status-draft" checked />
Off
</label>
<label class="btn btn-xs" data-toggle-class="btn-warning">
<input type="radio" name="status" value="2" id="status-draft" checked />
bingo
</label>
</div>
JavaScript
$('.btn-group[data-toggle=buttons]').each(function (i, e) {
var default_class = $(e).data('toggle-default-class') || 'btn-default';
$(e).find('label')
.click(function (event) {
$(e).find('label')
.each(function (i, e) {
if (!(e == event.target)) {
$(e).removeClass($(e).data('toggle-class'))
.addClass(default_class);
$(e).find('input')
.removeAttr('checked');
} else {
$(e).removeClass(default_class)
.addClass($(e).data('toggle-class'));
$(e).find('input')
.attr('checked', 1);
}
});
});
});