动态创建无线电引导开关 [英] create a radio bootstrap-switch dynamically

问题描述

要求:在表中动态创建无线电引导开关.

REQUIREMENT: to create radio bootstrap switch dynamically in table.

参考:我正在尝试实现此链接中给出的无线电引导程序开关 - http://www.bootstrap-switch.org/#radio-javascript

REFERENCE: i am trying to implement the radio bootstrap switch as given in this link - http://www.bootstrap-switch.org/#radio-javascript

我必须动态创建它.所以我通过更改上面链接中给出的 创建" 示例代码来尝试

I have to create it dynamicaly. So i tried it by changing the "Create" example code given in the above link

js 和 css 文件的链接是 - https://github.com/BdMdesigN/bootstrap-switch/tree/master/static

The link for the js and css files are - https://github.com/BdMdesigN/bootstrap-switch/tree/master/static

问题描述:能够创建引导开关，但无法处理单选按钮功能在同一组中选择一个开关

PROBLEM DESCRIPTION: Able to create the bootstrap switch but unable to handle the radio button functionality of choosing one switch in the same group

我的代码:

<table class="table table-bordered table-hover" id="main_table">
<thead>
<tr>
<th>Role Name</th>
<th>Status</th>
</tr>
</thead>
<tbody></tbody></table>

在创建函数中，我添加了以下代码来为表创建无线电开关:

in the create function i have added the following code to create radio switches for the table:

$('#btn-create').on('click', function () {          
        mainTable.fnAddData([
        'Role1',
        ' <input id="Role1" type="radio" name="mainTableRadio" checked >',
        '1'
        ]);
        $('#Role1').wrap('<div class="make-switch mainTableRadio"  />').parent().bootstrapSwitch();
         mainPolicyTable.fnAddData([
        'Role2',
        ' <input id="Role2" type="radio" name="mainTableRadio"  >',
        '1'
        ]);
        $('#Role2').wrap('<div class="make-switch mainTableRadio"  />').parent().bootstrapSwitch();
        $(this).remove()
    });
    $('.mainTableRadio').on('switch-change', function () {
        console.log("inside switchchange");
        $(' .make-switch.mainTableRadio').bootstrapSwitch('toggleRadioStateAllowUncheck', false);
    });

我也无法在交换机的switch-change功能中打印日志

I am also unable to print the log in the switch-change function of the switch

推荐答案

我通过在 'btn-create' 点击事件中添加 'switch-change' 功能解决了这个问题.

I solved it by adding the 'switch-change' function within the 'btn-create' click event.

这篇关于动态创建无线电引导开关的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！