Когда вы нажимаете кнопку edit, затем нужно найти родителя (tr), затем используйте метод find(), чтобы получить [data-val] внутри (tr), затем используйте метод each(), а внутри каждого метода установите data-val значение + checkbox значение равно (соответствует), затем проверено (true) что-то вроде приведенного ниже фрагмента.
$(function() {
// define the checkbox elements
let allcheckBoxes = $(".form-check-input");
$(".editBtn").on("click", function(e) {
e.preventDefault();
// Remove previous checked
allcheckBoxes.prop('checked', false);
// Find parent as <tr>
let $row = $(this).parent().parent();
$row.find('[data-val]').each(function(i,v){
var listValues = $(this).attr('data-val');
// If list value and checkbox value matched then checked -> true
$('.form-check-input[value="'+listValues+'"]').prop('checked', true);
});
});
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<div class="container my-5">
<div class="row">
<div class="col-4">
<h2>Mark your checkboxes</h2>
<form id="editForm">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="1" id="defaultCheck1">
<label class="form-check-label" for="defaultCheck1">
checkbox 1
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="2" id="defaultCheck2">
<label class="form-check-label" for="defaultCheck2">
checkbox 2
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="3" id="defaultCheck3">
<label class="form-check-label" for="defaultCheck3">
checkbox 3
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="4" id="defaultCheck4">
<label class="form-check-label" for="defaultCheck4">
checkbox 4
</label>
</div>
<button type="submit" class="btn btn-primary mt-3">Submit</button>
</form>
</div>
<div class="col-8">
<table class="table table-striped">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Options</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row"> <a href="#" class="btn btn-primary editBtn">edit</a></th>
<td>Mark</td>
<td>Otto</td>
<td class="optList">
<ul class="list-group">
<li class="list-group-item" data-val="1">1 - Cras justo odio</li>
<li class="list-group-item" data-val="2">2 - Dapibus ac facilisis in</li>
</ul>
</td>
</tr>
<tr>
<th scope="row"> <a href="#" class="btn btn-primary editBtn">edit</a></th>
<td>Jacob</td>
<td>Thornton</td>
<td class="optList">
<ul class="list-group">
<li class="list-group-item" data-val="3">3 - Morbi leo risus</li>
<li class="list-group-item" data-val="4">4 - Porta ac consectetur ac</li>
</ul>
</td>
</tr>
<tr>
<th scope="row"> <a href="#" class="btn btn-primary editBtn">edit</a></th>
<td>Larry</td>
<td>the Bird</td>
<td class="optList">
<ul class="list-group">
<li class="list-group-item" data-val="1">1 - Cras justo odio</li>
</ul>
</td>
</tr>
<tr>
<th scope="row">
<a href="#" class="btn btn-primary editBtn">edit</a>
</th>
<td>Larry</td>
<td>the Bird</td>
<td class="optList">
<ul class="list-group">
<li class="list-group-item" data-val="4">4 - Cras justo odio</li>
</ul>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>