aiden87 aiden87 - 25 days ago 7
jQuery Question

show bootstrap toggle text before change

I am using bootstrap toggle in my app, and what i'm trying to achieve is display text before the click actually happens. Now no text is shown before click and when i click on toggle it results in "toggle: true" and "toggle:false" .

I would like to display text before the click happens - like this: Music is currently: off, ...and then on click it would change to on / another click off again..

js

<div class="widget widget-table">
$(function () {
$('#toggle-event').change(function () {
$('#music-info').html('Music is currently ' + $(this).prop('checked'))
})
})


html

<div id="music-info"></div>
<input id="toggle-event" type="checkbox" data-toggle="toggle">


Any help?

Thank you!

Answer Source

I'm not sure if I'm undersatnding you well, is this what you want?

$(function () {

    $('#music-info').html('Music is currently ' + ($('#toggle-event').prop('checked') ? 'ON' : 'OFF') )

    $('#toggle-event').change(function () {
        $('#music-info').html('Music is currently ' + ($(this).prop('checked') ? 'ON' : 'OFF') )
    });
});

Check it here... https://fiddle.jshell.net/rigobauer/wfrLsa2h/