Невозможно переключить классы для группы списка флажков model.IList через JavaScript

Question

Долгое время слушатель, впервые звонящий.

У меня есть простой загрузчик <div class="list-group checked-list-box">, который заполняется флажками из @ model.IList.

<div class="form-group">
        @Html.Label("What needs to be done?", new { @class = "control-label col-md-2" })
        <div class="col-md-3">
            <div style="max-height: 300px; overflow: auto;">
                <div class="list-group checked-list-box">
                    @for (int i = 0; i < Model.AvailableJobs.Count; i++)
                    {
                        @Html.HiddenFor(m => m.AvailableJobs[i].id)
                        <label class="list-group-item far fa-circle" style="text-align: left;">
                            @Html.CheckBoxFor(m => m.AvailableJobs[i].IsSelected)
                            @Html.LabelFor(m => m.AvailableJobs[i].IsSelected, Model.AvailableJobs[i].name)
                            <span class="badge">+ @Html.ValueFor(m => m.AvailableJobs[i].time) min</span>
                        </label>
                    }
                </div>
            </div>
        </div>
    </div>

Все, что я естьЖелание произойти, когда метка нажата, или даже когда флажок внутри метки отмечен / не отмечен для метки, чтобы переключаться между некоторыми классами ('active far fa-circle / fa-check-circle').Я пробовал несколько способов справиться с этим, и до сих пор ниже, кажется, самый чистый способ, которым это должно работать ... но это не совсем так.Я могу щелкнуть в любом месте на ярлыке, и флажок будет переключаться, но сценарий, похоже, не сработает, если я не нажму непосредственно на поле флажка

<script>
$(function () {
    $('.list-group-item').click(function () {
        if ($(this).hasClass('far fa-check-circle active'))
        {
            $(this).removeClass('far fa-check-circle active')
            $(this).addClass('far fa-circle')
        }
        else
        {
            $(this).removeClass('far fa-circle')
            $(this).addClass('far fa-check-circle active')
        }
    })
});

Я также попытался изменитькласс метки в состоянии флажка, но все, кажется, следует за состоянием первого флажка против каждого вложенного флажка.

<script>
    $(function () {
        $('.list-group-item').click(function () {
            if ($('input[type=checkbox]').prop('checked')) {
                $(this).removeClass('far fa-circle')
                $(this).addClass('far fa-check-circle active')
            }
            else {
                $(this).removeClass('far fa-check-circle active')
                $(this).addClass('far fa-circle')
            }
        })
    });
</script>

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

Answer 1

Флажок - это еще один DOM над div. Так вот как это работает

$('.list-group-item').on('click' , function(e){
    $("input:checkbox" , this).change();
});
$(".list-group-item input:checkbox").on("click" , function(e){
    $(this).closest('label').toggleClass("fa-circle fa-check-circle active");
    // to check for checkbox checked
    //if(this.checked){............}
});