Question

我正在尝试在复选框输入上应用引导程序开关功能，但是Bootstrap开关类未应用于我的复选框输入。

用于呈现引导程序开关类的JS：

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，引导开关v3.3.4

Answer 1

U应该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>

Answer 2

我在页面中添加了以下代码，它开始工作

setInterval(function(){$('.bootstrapSwitch').bootstrapSwitch();}, 2000);

Answer 3

<head>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>

<body>
  <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</label>
  </div>
</body>

Answer 4

我遇到的问题是安装了 Bootstrap 4.1，但我需要 4.2。升级解决了这个问题。

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

4 个答案: