In this test code, I have a button that I want to be disabled if no checkboxes are checked and enabled if at least one checkbox is checked.
The function to do this works but not on data tables. I am trying to make it work on datatables. But its not working with me
This is not my code... This is just to test.
$(document).ready(function() {
var dataTable = $('#example').dataTable({
columnDefs: [{
orderable: false,
className: 'select-checkbox',
targets: 0
},
{
"visible": false,
"searchable": false,
}
],
select: {
style: 'multi',
selector: 'td:first-child'
},
order: [
[1, 'asc']
]
})
var checkBoxes = $('.select-checkbox');
checkBoxes.change(function() {
$('#btnSelectedRows').prop('disabled', checkBoxes.filter(':checked').length < 1);
});
$('.select-checkbox').change();
});
<
/script><!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/css/jquery.dataTables_themeroller.css">
<script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js"></script>
<script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/select/1.3.1/css/select.dataTables.min.css">
<link href='http://codeseven.github.io/toastr/build/toastr.min.css' rel='stylesheet' type="text/css">
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.22/datatables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/select/1.3.1/js/dataTables.select.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<button id="btnSelectedRows" name="btnSelectedRows" data-target="#grnModal" data-toggle="modal" class="btn btn-success btn-s">
click
</button>
<table class="dataTable" id="example">
<thead>
<tr>
<th></th>
<th>Rendering engine</th>
<th>Browser</th>
<th>Platform(s)</th>
<th>Engine version</th>
<th>CSS grade</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td>Misc</td>
<td>Dillo 0.8</td>
<td>Embedded devices</td>
<td>-</td>
<td>X</td>
</tr>
<tr>
<td></td>
<td>Misc</td>
<td>Links</td>
<td>Text only</td>
<td>-</td>
<td>X</td>
</tr>
<tr>
<td></td>
<td>Misc</td>
<td>Lynx</td>
<td>Text only</td>
<td>-</td>
<td>X</td>
</tr>
<tr>
<td></td>
<td>Misc</td>
<td>IE Mobile</td>
<td>Windows Mobile 6</td>
<td>-</td>
<td>C</td>
</tr>
<tr>
<td></td>
<td>Misc</td>
<td>PSP browser</td>
<td>PSP</td>
<td>-</td>
<td>C</td>
</tr>
<tr>
<td></td>
<td>Other browsers</td>
<td>All others</td>
<td>-</td>
<td>-</td>
<td>U</td>
</tr>
</tbody>
</table>
Aucun commentaire:
Enregistrer un commentaire