为什么复选框滑块不能与鼠标一起工作

我有以下数据表元素:

<div id="searchable_wrapper" class="dataTables_wrapper form-inline" role="grid">
    <table id="termGridParametersTable" class="table table-bordered table-hover table-striped dataTable" aria-describedby="searchable_info">
        <thead>
            <tr>
                <th th:text="#{gen.code}" />
                <th th:text="#{gen.desc}" />
                <th th:text="#{termGrid.paramType}" />
                <th th:text="#{termGrid.paramValue}" />
            </tr>
        </thead>
        <tbody>
            <tr th:each="gridEffectiveParam : ${effectivePojo.effectiveParameters}">
                <td th:text="${gridEffectiveParam.parameter.code}" />
                <td th:text="${gridEffectiveParam.parameter.description}" />
                <td th:text="#{'termGrid.' + ${gridEffectiveParam.parameter.contractParameterType}}" />
                <td>
                    <th:block th:if="${#strings.equals(gridEffectiveParam.parameterType,'paramType.boolean')}">
                        <input type="checkbox" name="booleanValue" th:onchange="'updateValue(''' + ${gridEffectiveParam.id} + ''', this);'" th:checked="${gridEffectiveParam.booleanValue}" class="checkbox-slider colored-darkorange" />
                        <span class="text"></span>
                    </th:block>
                    <th:block th:if="${#strings.equals(gridEffectiveParam.parameterType,'paramType.float')}">
                        <input class="form-control" type="text" id="floatValue" th:onblur="'updateValue(''' + ${gridEffectiveParam.id} + ''', this);'" th:value="${gridEffectiveParam.value}" />
                    </th:block>
                    <th:block th:if="${#strings.equals(gridEffectiveParam.parameterType,'paramType.integer')}">
                        <input class="form-control" type="text" id="intValue" th:onblur="'updateValue(''' + ${gridEffectiveParam.id} + ''', this);'" th:value="${gridEffectiveParam.value}" />
                    </th:block>
                </td>
            </tr>
        </tbody>
    </table>
</div>

updateValue() javascript函数运行良好，如下所示:

function updateValue(id,value) {
    $.ajax({
        url: "updateEffectiveParameter?id=" + id + "&value=" + value.value,
    type: "GET",
    datatype:"json",
    contentType: 'application/json',
    mimeType: 'application/json', 
    success: function(response){
        if(!response){
            bootbox.alert("a problem occured");
        }
    },
    error: function(e){
        alert('error message');
    }
});

但是我只能通过点击前一个字段的TAB并点击空格键来改变复选框滑动条的值。没有鼠标选择

我理解这与DataTables JS组件有关。

这里的问题是什么?如何使它工作?