javascript - Bootstrap 开关类不适用于复选框输入？

Question

我正在尝试在复选框输入上应用 Bootstrap 开关功能，但 Bootstrap 开关类不适用于我的复选框输入。

JS渲染 Bootstrap 开关类:

cx.common.admin.tableSwitchableColumn('status', {
    editable: true,
    createdCell: function (td, cellData, rowData, row, col){
        $(td).data('status-id', rowData.id);
    },
    onText: 'Enable',
    offText: 'Disable'
})

上述代码的渲染 HTML 输出:

<td class=" text-center">
    <input class="bootstrapSwitch" data-on-color="success" data-on-text="Enable" data-off-text="Disable" data-size="mini" type="checkbox" checked="">
</td>

用户界面中的输出:

tableSwitchableColumn 基本函数:

// Function that render a Switchable column e.g Yes/No
cx.common.admin.tableSwitchableColumn = function(columnName, options){
    // Extend default options with specified options (if any)
    options = $.extend({
        editable: false,
        createdCell: null,
        dateEvaluatedAsYes: function(data){
            return data === '1' || data == 1;
        },
        onText: 'Yes',
        offText: 'No'
    }, cx.common.getValueOrDefault(options, {}));
    // Build the column settings object
    var columnSettings = {
        data: columnName,
        width: '25px',
        render: function(data){
            var checkedAttribute = options.dateEvaluatedAsYes(data) ? ' checked' : '';
            var disabledAttribute = options.editable ? '' : ' disabled';
            return '<input class="bootstrapSwitch" data-on-color="success" data-on-text="' + options.onText + '" data-off-text="'+ options.offText + '" data-size="mini" type="checkbox"' + checkedAttribute + disabledAttribute + '>';
        },
        className: 'text-center'
    };
    // If specified in the options, set the celle created callback
    if(options.createdCell !== null)
        columnSettings.createdCell = options.createdCell;
    // Return the column settings
    return columnSettings;
}

使用的版本:

Bootstrap v3.4.1，Bootstrap开关v3.3.4

Answer 1

你应该wrap it inside div tag with bootstrap appropriate classes.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<div class="custom-control custom-switch">
  <input type="checkbox" class="custom-control-input" id="customSwitch1">
  <label class="custom-control-label" for="customSwitch1">Toggle this switch element</label>
</div>