"Switch on off radio button styled glyphicons"
Bootstrap 3.3.0 Snippet by inge1980

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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 class="row">
<div class="btn-group" role="group" aria-label="basic label">
<p class="help-block">Radio button (on/off): </p>
</div>
<div class="btn-group btn-group-xs" role="group" aria-label="...">
<a id="btnOn" href="javascript:;" class="btn btn-default"><span class="glyphicon glyphicon-ok"></span></a>
<a id="btnOff" href="javascript:;" class="btn btn-danger active"><span class="glyphicon glyphicon-remove"></span></a>
</div>
<input type="radio" name="menucolor" value="navbar-default" checked>
<input type="radio" name="menucolor" value="navbar-inverse">
</div>
</div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
input[type=radio][name="menucolor"] {
display: none;
}
#btnOn .glyphicon-ok {
opacity: 0;
}
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
$('[id^="btnO"]').click(function() {
var notchecked = $('input[type="radio"][name="menucolor"]').not(':checked');
$('.navbar.'+notchecked.val()).toggleClass('navbar-default navbar-inverse');
notchecked.prop("checked", true);
$(this).parent().find('a').each(function() {
if($(this).attr('id') == 'btnOn'){
$(this).toggleClass('active btn-success btn-default');
} else {
$(this).toggleClass('active btn-danger btn-default');
}
});
doChange(notchecked);
});
$('input[type="radio"][name="menucolor"]').change(function() {
doChange(this);
});
function doChange(object){
if($(object).val() == "navbar-default"){
$('#btnOn').removeClass('active');
$('#btnOn .glyphicon-ok').css('opacity','0');
$('#btnOff .glyphicon-remove').css('opacity','1');
$('#btnOff').focus();
}
if($(object).val() == "navbar-inverse"){
$('#btnOff').removeClass('active');
$('#btnOff .glyphicon-remove').css('opacity','0');
$('#btnOn .glyphicon-ok').css('opacity','1');
$('#btnOn').focus();
}
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: