如何动态更改Bootstrap切换状态?

时间:2015-06-23 06:41:41

标签: toggleswitch

我试图动态添加新的bootstrap切换开关,但我不知道如何动态更改状态。提前致谢!



$('.btn').on('click', function () {
var status = true;    
    for(var i=0; i<3; i++){
        $('p').after(
            '<input id="newCheckBox" type="checkbox" data-off-text="Male" data-on-text="Female" checked="false" class="newBSswitch">'
        );
        console.log(status);
        $('.newBSswitch').bootstrapSwitch('state', status);
        status = false;
    }
});
&#13;
<p> <a class="btn btn-lg btn-primary" href="#">Display another Toggle</a></p>
&#13;
&#13;
&#13;

这是小提琴:http://jsfiddle.net/icamilo95/8wars2ep/7/

1 个答案:

答案 0 :(得分:1)

我意识到我只需要在输入中添加不同的ID,并为每个特定的ID更改类.newBSSwitch,如下所示:

$('.btn').on('click', function () {
var status = true;    
    for(var i=0; i<5; i++){
        $('p').after(
            '<input id="newCheckBox'+[i]+'" type="checkbox" data-off-text="Male" data-on-text="Female" checked="false" class="newBSswitch">'
        );
        console.log(status);
        $('#newCheckBox'+[i]).bootstrapSwitch('state', status);
        status = false;
    }
});
 <p> <a class="btn btn-lg btn-primary" href="#">Display another Toggle</a></p>