Search code examples
javascripttwitter-bootstrapbootstrap-switch

Bootstrap switch class isn't applying on checkbox input?

I am trying to apply bootstrap switch functionality on checkbox inputs but Bootstrap switch class isn't applying on my checkbox inputs.

JS for rendering bootstrap switch class:

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

Rendered HTML output of above code:

<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>

Output in UI:

switchable output

tableSwitchableColumn base function:

// 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;
}

Versions used:

Bootstrap v3.4.1, Bootstrap switch v3.3.4

Solution

  • I added the below code in my page and it started working

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