I created a progress bar using bootstrap with a default value of 33% and a switch that toggles between all active or inactive. When the switch is activated, I want the progress bar to show a value of 100%, and when it's inactive, a value of 0%.
However, this only works correctly the first time I click the switch. If I click the switch multiple times, it doesn't function as expected:
To view the issue in action, visit: http://jsfiddle.net/RNMJ7/1/
The main structure of the progress bar is outlined below:
<div class="row progbar">
<div class="col-md-2 col-xs-2"><p class="progressinfo">33%</p></div>
<div class="col-md-9">
<div class="progress">
<div class="progress-bar progress-bar-success" style="width: 33%">
<span class="sr-only">33% Complete (success)</span>
</div>
</div> </div></div>The JQuery code for the progress bar changes (triggered by the switch's onClick event) is displayed below:
$(".switch").click(function () {
$("#tp1")[0].innerHTML = ( $("#tp1").text() == "Activar todas" )? 'Desactivar todas' : 'Activar todas';
$(".progressinfo")[0].innerHTML = ( $(".progressinfo").text() == "33%" )? '100%' : '0%';
var varVisible2 = ( $(".progressinfo").text() == "33%" )? $('.progress-bar-success').css( "width", "33%" ) : $('.progress-bar-success').css( "width", "100%" );
var varVisible3 = ( $(".progressinfo").text() == "0%" )? $('.progress-bar-success').css( "width", "0%" ) : $('.progress-bar-success').css( "width", "100%" );
$('div.panel').each( function(){
this.className = "panel " + varVisible;
});
var miniswitch = ( $("#tp1").text() == "Activar todas" )? false : true;
$('.miniswitch').each( function(){
$("input[type=checkbox]").attr('checked',miniswitch);
});
});