显示 bootstrap 更改前的切换文本

Question

我在我的应用程序中使用 bootstrap 切换，我想要实现的是在实际发生点击之前显示文本。现在在点击之前没有显示文本，当我点击切换时它会导致 "toggle: true" 和 "toggle:false" .

我想在点击发生之前显示文本 - 像这样：音乐当前：关闭，...然后点击它会变为打开/再次点击关闭..

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">

有什么帮助吗？

谢谢！

Answer 1

不知道我是否理解你的意思，这是你想要的吗？

$(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') )
    });
});

在这里查看... https://fiddle.jshell.net/rigobauer/wfrLsa2h/

Answer 2

好吧，我需要捕获点击事件，以在服务器上验证（使用 ajax 请求）用户当时是否可以或不能更改该状态。因此，每次单击我的切换按钮都会触发一个 HTTP 请求，询问是否可以更改。我实现了以下代码：

function validateStateChangeToOnhandleData){ 
   $.get("validate-state-change-on.php") .done(function(data){ handleData(data); }); 
}

听众：

$('#toggle_wrapper').click(function(e){ e.stopPropagation(); if($('#fam_statusinscricoes').prop('checked')){ validateStateChangeToOn(function(response){ if(response){ $('#mybootstraptoggle').bootstrapToggle('on'); }else{ alert("It can be changed!"); } }) }else{ validateStateChangeToOff(.....).... };

'validateStateChangeToOff' 与 'validateStateChangeToOn' 非常相似。

希望对大家有所帮助。

显示 bootstrap 更改前的切换文本

show bootstrap toggle text before change

html

javascript

jquery

toggle

twitter-bootstrap