无法通过 javascript 切换 model.IList 复选框列表组的类答案

【问题标题】：Unable to toggle classes for model.IList checkbox list group through javascript无法通过 javascript 切换 model.IList 复选框列表组的类
【发布时间】：2019-02-13 06:11:25
【问题描述】：

长时间聆听，第一次来电。

我有一个简单的引导程序 <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>

我很确定这是因为我不知道如何在我的脚本中选择适当的复选框，而且我没有任何运气在网上找到对我有意义的东西。请帮忙 - 谢谢！

【问题讨论】：

标签： javascript jquery html checkbox

【解决方案1】：

复选框是 div 上的另一个 DOM .. 所以这就是它的工作原理

$('.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){............}
});

【讨论】：