how to make radio buttons behave in a mutually exclusive way - php

Question

I was to trying to update my checkbox value based on checked..But the problem I'm facing is i can't uncheck the old checkbox checked ..So when i click on the new checkbox the old one should be uncheck...I have used laravel platform where table header comes from database and from database the old checkbox value came..
here is my blade view :
<table class="table">
<thead>
<tr>
<th>SL No</th>
<th>Name</th>
#foreach($roles as $row)
<th>{{$row->label}}</th>
#endforeach
</tr>
</thead>
<tbody>
<?php $i=1; ?>
#foreach($users as $user)
#foreach($user->roles as $row)
<tr>
<td>{{$i}}</td>
<td>{{$user->name}}</td>
#foreach($roles as $role)
<td>
#if($role->role == $row->role)
<input type="checkbox" class="myCheckbox" checked="" >
#else
<input type="checkbox" class="myCheckbox">
#endif
</td>
#endforeach
</tr>
<?php $i++; ?>
#endforeach
#endforeach
</tbody>
</table>
Here is the javascript i used for check only one checkbox .
$('.myCheckbox').click(function() {
$(this).siblings('input:checkbox').prop('checked', false);
});
anybody could help me to find out the solution please?

Answer 1

Either use radio buttons, or iterate over all checkboxes setting the checked value to false and only checking the just clicked checkbox.
Here is an example.
var container = document.querySelector('.container');
container.addEventListener('click', function(evt) {
[].slice.call(this.children).forEach(function(input) {
input.checked = false;
})
evt.target.checked = true;
})
<div class="container">
<input type="checkbox"> Foo
<input type="checkbox"> Bar
<input type="checkbox"> Baz
</div>