如何动态更改 Bootstrap 切换状态？答案

【问题标题】：How can I change the Bootstrap toggle state dynamically?如何动态更改 Bootstrap 切换状态？
【发布时间】：2023-03-11 06:55:01
【问题描述】：

我正在尝试动态添加新的引导切换开关，但我不知道如何动态更改状态。提前致谢！

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

&lt;p&gt; &lt;a class="btn btn-lg btn-primary" href="#"&gt;Display another Toggle&lt;/a&gt;&lt;/p&gt;

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

【问题讨论】：

标签： toggleswitch

【解决方案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;
    }
});

 &lt;p&gt; &lt;a class="btn btn-lg btn-primary" href="#"&gt;Display another Toggle&lt;/a&gt;&lt;/p&gt;

【讨论】：