kendodropdownlist onChange触发时，css / style中断

Question

好吧，我有一个看起来像这样的kendogrid

当我启用然后选择一种累积奖金类型时，问题就来了，它打破了启用的复选框，这确实是一个样式复选框，我不知道为什么这么做？

当我选择某物时，它看起来像这样

如您所见，它已变为常规复选框，并且由于某种原因，它也未选中具有选定头奖类型的复选框。

任何人都不知道为什么或是否有更好的方法让我对选择的jackpotType做出反应。这是代码。

$("#configSettingsGrid").kendoGrid({

    dataSource: [
        {
            index: 1,
            Enabled: false,
            jackpotType: [{ name: "Progressive jackpot" }, { name: "Guaranteed amount" }, { name: "Guaranteed time" }],
            selectedJackpotType: ""
        },
        {
            index: 2,
            Enabled: false,
            jackpotType: [{ name: "Progressive jackpot" }, { name: "Guaranteed amount" }, { name: "Guaranteed time" }],
            selectedJackpotType: ""
        },
        {
            index: 3,
            Enabled: false,
            jackpotType: [{ name: "Progressive jackpot" }, { name: "Guaranteed amount" }, { name: "Guaranteed time" }],
            selectedJackpotType: ""
        },
        {
            index: 4,
            Enabled: false,
            jackpotType: [{ name: "Progressive jackpot" }, { name: "Guaranteed amount" }, { name: "Guaranteed time" }],
            selectedJackpotType: ""
        },
    ],
    pageable: false,
    scrollable: true,
    navigatable: true,
    selectable: false,
    columns: [
        {
            title: "@Resources.GetString("common.enabled")",
            template: addStyledCheckbox,
            width: "66px",
            attributes: {
                "class": "gridCellCheckbox"
            }
        },
        { title: "@Resources.GetString("common.index")", template: "<div class='gridposition'> #= index #</div>", width: "40px"},
        {
            field: "jackpotType", title: "@Resources.GetString("common.jackpottype")", template: addJackpotTypes 
             , width: "150px"
        }
    ],
    dataBound: function (e) {
        var grid = e.sender;
        var items = e.sender.items();
        items.each(function (index) {
            var dataItem = grid.dataItem(this);
            var ddt = $(this).find('.dropDownTemplate');
            this.className += " disabledrow";

            $(ddt).kendoDropDownList({
                value: dataItem.value,
                dataSource: e.sender.dataSource.options.data[index].jackpotType,
                dataTextField: "name",
                dataValueField: "name",
                optionLabel: "Select Jackpot Type",
                change: onDDLChange
            });
        });
    }
});

function addStyledCheckbox() {

    var checkbox = '<div class="toggle_wrapper"><input type="checkbox" class="gridCheckbox" data-on="&nbsp" data-off="&nbsp" data-toggle="toggle" data-onstyle="success" data-offstyle="danger" data-size="mini"><div/>'

    return checkbox
}
function addJackpotTypes(dataItem) {

    var input = "<input id='jackpotTypeDropdown' class='dropDownTemplate' />"

    return input
};

function onDDLChange(e) {
    var element = e.sender.element;
    var row = element.closest("tr");
    var grid = $("#configSettingsGrid").data("kendoGrid");
    var dataItem = grid.dataItem(row);

    dataItem.set("value", e.sender.value());


};