Снимите другой флажок на одном отмеченном, но отмеченный флажок не снимать

Question

У меня есть два флажка, когда я нажимаю на флажок 1-й список избранных плейлистов, другой популярный жанр должен быть снят. Но это не происходит, изменено только значение, но отмечен флажок не изменилось. Кто-нибудь может мне помочь, чтобы решить эту проблему.

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;
}

Answer 1

Ваш код JS в порядке. вам не нужно использовать not(this) tho, потому что вы связываете событие change на основе имени класса.

После отправки более подробной информации о сгенерированном HTML это окончательное решение.

var $genreTags = $('input.genreTag'),
    $filterPlaylist = $('input.filter-playlist');

$genreTags.on('change', function (e){
    $filterPlaylist.each(function(){
        var $this = $(this);
        $this.prop('checked', false);
        // because of generated html
        $this.parent().find('> div').removeClass('chk-checked').addClass('chk-unchecked');
    });
});

$filterPlaylist.on('change', function (e) {
    $genreTags.each(function(){
        var $this = $(this);
        $this.prop('checked', false);
        // because of generated html
        $this.parent().find('> div').removeClass('chk-checked').addClass('chk-unchecked');
    });
}); 

Answer 2

Ваш код работает нормально. Но лучше использовать радио типа входа, если вы хотите выбрать любой из вариантов. Я подготовил образец кода

$('input:radio').click(function() {
  $('input:radio:checked').addClass('active');
  $('input:radio:not(:checked)').removeClass('active');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<label>
    <input type="radio" name="radio1" value="radio1">
  </label>


<label>
     <input type="radio" name="radio1" value="radio2">
   </label>

Answer 3

Попробуйте использовать кнопку-переключатель в родительском div, т.е. в вашем случае список избранных плейлистов, при переключении на конкретную кнопку-переключатель, снимите все флажки популярного жанра