Question

我在我的应用程序中使用bootstrap切换，而我想要实现的是在实际发生点击之前显示文本。现在点击之前没有显示任何文字，当我点击切换时，会导致＆＃34;切换：true＆＃34;和＆＃34;切换：false＆＃34;

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

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

好吧，我需要捕获click事件，以便在服务器上（使用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切换文本

2 个答案: