https://i.sstatic.net/EEC2U.png
I am facing an issue with two checkboxes in my code. When I click on the first checkbox in the featured playlist section, another popular genre checkbox should be unchecked. However, only the value changes and the checked mark remains unchanged. Can anyone provide assistance in resolving this problem?
HTML
@foreach ($popular as $genreTag)
<li class="lib">
<label><input class="genreTag" id="{{ $genreTag->id}}" type="checkbox" name="" value="{{ $genreTag->name }}">{{{ $genreTag->name }}} ({{count(json_decode($genreTag->tracks, true))}}) </label>
</li>
@endforeach
@foreach ($featured as $playlist)
<li class="lib">
<label><input class="filter-playlist" id='{{{ $playlist->id}}}' tracks='{{ $playlist->tracks }}' type="checkbox" value="{{ $playlist->name}}">{{ $playlist->name}} ({{count(json_decode($playlist->tracks, true))}}) </label>
</li>
@endforeach
JS
$('.genreTag').on('change', function (e){
$('input.filter-playlist').not(this).prop('checked', false);
});
$('.filter-playlist').on('change', function (e) {
$('input.genreTag').not(this).prop('checked', false);
});
CSS
.chk-area {
border: 2px solid #d22890;
margin: -2px 10px 0 0;
float: left;
width: 24px;
height: 24px;
border-radius: 3px;
position: relative;
}
.chk-checked {
background: #d22890;
border-color: #fff;
}
.chk-unchecked {
background: #fff;
border-color: #d22890;
}
.ch-playlist {
display: inline-block;
width: 100%;
color: #667482;
text-decoration: none;
padding: 10px 20px 10px 45px;
}