Checkbox Bootstrap data toggle not rendering on click in JqueryDataTable in Mobile Browser View

Currently I have a jquery datatable in which I added checkbox column using bootstrap data-toggle, when I open in my PC browser, I can able to toggle the data-toggle checkbox but same thing not working in mobile browser view.

jsp code snippet as below:

    $(document).ready(function(){
        var searchCondition = '${searchCondition}';

        $('#dtable').DataTable({
                "bAutoWidth": true,
                "order": [[ 0, "asc" ]],
            "lengthMenu": [[10,20,30,50, -1], [10,20,30,50, "All"]],
            "oSearch" : {"sSearch": searchCondition},
            responsive: true
        });
    });

<%@ taglib prefix="form" uri="http://ift.tt/IED0jK" %>
<%@ taglib prefix="spring" uri="http://ift.tt/18bwTB1" %>
<%@ include file="/WEB-INF/views/template/header.jsp" %>

<div class="container-wrapper">
    <div class="container">
        <div class="page-header alert alert-success">
            <h1>Customer Management Page</h1>

            <p class="lead">This is the customer management page!</p>
        </div>
<form:form method="post" action="${pageContext.request.contextPath}/admin/updateAdminCustomer" modelAttribute="customerManagmentUtilForm">
        <table id="dtable" class="datatable table-striped table-hover display">
            <thead>
            <tr class="bg-primary">
                <th>Name</th>
                <th>Email</th>
                <th>Phone</th>
                <th>Username</th>
                <th>Customer Type</th>
                <th>Enabled</th>
            </tr>
            </thead>
            <tfoot>
            <tr class="bg-primary">
                <th>Name</th>
                <th>Email</th>
                <th>Phone</th>
                <th>Username</th>
                <th>Customer Type</th>
                <th>Enabled</th>
            </tr>
            </tfoot>
            
            <tbody>
            <c:forEach items="${customerManagmentUtilForm.customerManagmentUtilList}" var="custMgmt" varStatus="status">
                <tr>
                        <%-- <td align="center"><form:hidden path="customerManagmentUtilList[${status.index}].customerId"  name="customerManagmentList[${status.index}].customerId" value="${custMgmt.customerId}" placeholder="Readonly input" readonly="readonly"/>${status.count}</td> --%>
                        
                        <td>${custMgmt.customerName}
                        <form:hidden path="customerManagmentUtilList[${status.index}].customerName"  name="customerManagmentList[${status.index}].customerName" value="${custMgmt.customerName}" placeholder="Readonly input" readonly="readonly"/>
                        <form:hidden path="customerManagmentUtilList[${status.index}].customerId"  name="customerManagmentList[${status.index}].customerId" value="${custMgmt.customerId}" placeholder="Readonly input" readonly="readonly"/>
                        </td>
                        <td>${custMgmt.customerEmail}<form:hidden path="customerManagmentUtilList[${status.index}].customerEmail" name="customerManagmentList[${status.index}].customerEmail" value="${custMgmt.customerEmail}" placeholder="Readonly input" readonly="readonly"/></td>
                        <td>${custMgmt.customerPhone}<form:hidden path="customerManagmentUtilList[${status.index}].customerPhone" name="customerManagmentList[${status.index}].customerPhone" value="${custMgmt.customerPhone}" placeholder="Readonly input" readonly="readonly"/></td>
                        <td>${custMgmt.userName}<form:hidden path="customerManagmentUtilList[${status.index}].userName" name="customerManagmentList[${status.index}].userName" value="${custMgmt.userName}" placeholder="Readonly input" readonly="readonly"/></td>
                        <td>${custMgmt.customerRole}<form:hidden path="customerManagmentUtilList[${status.index}].customerRole" name="customerManagmentList[${status.index}].customerRole" value="${custMgmt.customerRole}" placeholder="Readonly input" readonly="readonly"/></td>
                        <td><form:checkbox id="toggle-two" path="customerManagmentUtilList[${status.index}].enable" name="customerManagmentList[${status.index}].enable" value="${custMgmt.enable}" data-toggle="toggle" data-onstyle="success" data-offstyle="danger" data-on="Enabled" data-off="Disabled"/></td>
                        
                </tr>

        </c:forEach>
        </tbody>
        </table>
        <input type="submit" value="submit" class="btn btn-default">
        <a href="<c:url value="/admin" />" class="btn btn-default">Cancel</a>
        
</form:form>
<%@ include file="/WEB-INF/views/template/footer.jsp" %>

PC browser image(Initial State, OK) PC browser image(After toggle State, OK) Mobile View in Browser(Can't not Toggle when click, NOT OK) Kindly help me where do I need to fix.

Thank you very much.