Вам нужно e.preventDefault();, чтобы избежать двойного срабатывания tr щелчка.
Вот демонстрация изменений.
$('.dashboard-table-tbody tr').click(function(e) {
if ($(this).hasClass('active')) {
$(this).removeClass('active');
$(this).children('td').children('div').children('input').prop('checked', false);
} else {
$(this).addClass('active');
$(this).children('td').children('div').children('input').prop('checked', true);
}
if ($('.table tbody').find('input:checkbox:checked').length === $('.table tbody').find('input:checkbox').length) {
$(".headerCheckbox").prop('checked', true);
} else {
$(".headerCheckbox").prop('checked', false);
}
e.preventDefault();
});
$(".headerCheckbox").click(function(e) {
if ($(this).is(":checked")) {
$(".table tbody tr").addClass("active");
$(".table tbody tr input:checkbox").prop('checked', true);
} else {
$(".table tbody tr").removeClass("active");
$(".table tbody tr input:checkbox").prop('checked', false);
}
});
.dashboard-table{
margin-bottom: 0;
font-size:13px;
line-height:15px;
color:#8b8e8c;
}
.dashboard-table th{
border:none;
padding:8px 12px;
font-weight:600;
}
.dashboard-table td{
padding:12px 12px 12px 12px;
vertical-align: middle;
}
.dashboard-table a{
font-weight:600;
}
.table-checkbox-col-head{
width:44px;
}
.table-checkbox{
padding: 0;
min-height: auto;
width: 16px;
height: 16px;
margin: 0 auto;
display: inline-block;
vertical-align: middle;
}
.table-checkbox .table-checkbox-label{
width: 16px;
height: 16px;
}
.table-checkbox .table-checkbox-label:before, .table-checkbox .table-checkbox-label:after{
top: 0;
left: 0;
margin-top: 0;
}
.dashboard-table tbody tr:hover {
background-color: #fafbfe;
}
.dashboard-table tbody tr.active {
background-color: #f8f9fc;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-sm dashboard-table">
<thead>
<tr>
<th scope="col" class="table-checkbox-col-head">
<div class="custom-control custom-checkbox defaultCheckbox table-checkbox">
<input class="custom-control-input headerCheckbox" id="customControlInline2" type="checkbox">
<label class="custom-control-label table-checkbox-label" for="customControlInline2"></label>
</div>
</th>
<th scope="col" class="p-l-0">Name</th>
<th scope="col">Size</th>
<th scope="col">Upload at</th>
<th scope="col" class="text-right">Views</th>
</tr>
</thead>
<tbody class="dashboard-table-tbody">
<tr>
<td class="table-checkbox-col-head">
<div class="custom-control custom-checkbox defaultCheckbox table-checkbox">
<input class="custom-control-input checkBox" id="customControlInline3" type="checkbox">
<label class="custom-control-label table-checkbox-label" for="customControlInline3"></label>
</div>
</th>
<td class="p-l-0"><a href="#">File-Name.mp4</a></td>
<td>137.3kB</td>
<td>10/9/2018, 4:53:28 PM</td>
<td class="text-right">10</td>
</tr>
<tr class="active">
<td class="table-checkbox-col-head">
<div class="custom-control custom-checkbox defaultCheckbox table-checkbox">
<input class="custom-control-input" id="customControlInline4" type="checkbox" checked>
<label class="custom-control-label table-checkbox-label" for="customControlInline4"></label>
</div>
</th>
<td class="p-l-0"><a href="#">File-Name.mp4</a></td>
<td>137.3kB</td>
<td>10/9/2018, 4:53:28 PM</td>
<td class="text-right">10</td>
</tr>
<tr>
<td class="table-checkbox-col-head">
<div class="custom-control custom-checkbox defaultCheckbox table-checkbox">
<input class="custom-control-input" id="customControlInline5" type="checkbox">
<label class="custom-control-label table-checkbox-label" for="customControlInline5"></label>
</div>
</th>
<td class="p-l-0"><a href="#">File-Name.mp4</a></td>
<td>137.3kB</td>
<td>10/9/2018, 4:53:28 PM</td>
<td class="text-right">10</td>
</tr>
<tr>
<td class="table-checkbox-col-head">
<div class="custom-control custom-checkbox defaultCheckbox table-checkbox">
<input class="custom-control-input" id="customControlInline6" type="checkbox">
<label class="custom-control-label table-checkbox-label" for="customControlInline6"></label>
</div>
</th>
<td class="p-l-0"><a href="#">File-Name.mp4</a></td>
<td>137.3kB</td>
<td>10/9/2018, 4:53:28 PM</td>
<td class="text-right">10</td>
</tr>
<tr>
<td class="table-checkbox-col-head">
<div class="custom-control custom-checkbox defaultCheckbox table-checkbox">
<input class="custom-control-input" id="customControlInline7" type="checkbox">
<label class="custom-control-label table-checkbox-label" for="customControlInline7"></label>
</div>
</th>
<td class="p-l-0"><a href="#">File-Name.mp4</a></td>
<td>137.3kB</td>
<td>10/9/2018, 4:53:28 PM</td>
<td class="text-right">10</td>
</tr>
<tr>
<td class="table-checkbox-col-head">
<div class="custom-control custom-checkbox defaultCheckbox table-checkbox">
<input class="custom-control-input" id="customControlInline8" type="checkbox">
<label class="custom-control-label table-checkbox-label" for="customControlInline8"></label>
</div>
</th>
<td class="p-l-0"><a href="#">File-Name.mp4</a></td>
<td>137.3kB</td>
<td>10/9/2018, 4:53:28 PM</td>
<td class="text-right">10</td>
</tr>
</tbody>
</table>