要件: テーブルで動的に無線ブートストラップ スイッチを作成する。
参照: このリンクにあるように、無線ブートストラップ スイッチを実装しようとしています - http://www.bootstrap-switch.org/#radio-javascript
動的に作成する必要があります。だから私は上記のリンクにある「作成」のサンプルコードを変更して試しました
js および css ファイルへのリンクは、https://github.com/BdMdesigN/bootstrap-switch/tree/master/staticです。
問題の説明: ブートストラップ スイッチを作成できますが、同じグループ内の 1 つのスイッチを選択するラジオ ボタン機能を処理できません。
私のコード:
<table class="table table-bordered table-hover" id="main_table">
<thead>
<tr>
<th>Role Name</th>
<th>Status</th>
</tr>
</thead>
<tbody></tbody></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);
});
スイッチのスイッチ変更機能でログを印刷することもできません