为什么复选框滑块不适用于鼠标？

Question

我有以下的dataTable元素：

<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 component有关。

这里有什么问题，以及如何让它工作？

Answer 1

第一个复选框有th:onchange，第二个和第三个复选框有th:onblur。我想你需要在所有三个中使用th:onchange。