使用 JQuery 的活动和非活动复选框

Question

我正在使用 ASP.Net MVC 开发 Web 应用程序，但 HTML 复选框元素存在问题。所以这是我的复选框视图模型：

public class ServiceViewModel:ViewModelBase
{
    public virtual string Name { get; set; }
    public virtual bool IsActive { get; set; }

}

我的看法是这样的：

        @model IList<Saloon.ViewModels.ServiceViewModel>

        <ul>
             @for (var i = 0; i < Model.Count; i++)
             {
                <li>
                    <input type="checkbox" class="chk" name="@Model.Name[i]" id="@(i+1)" />
                    <label for="@Model.Name[i]">@Model.Name[i]</label>
                </li>
             }
        </ul>

和我的选中和未选中复选框的 JQuery 代码：

<script>
$('input[type=checkbox].chk').click(function () {
    if ($(this).is(":checked")) {
        $(this).prop("checked", false);
    } else {
        $(this).prop('checked', true);
    }
});
</script>

但是这个 JQuery 代码不起作用。即使我试过 $('input[type=checkbox].chk').change(function () {... 以及我在 Internet 上找到的 JQuery 可用的其他一些方法，但这些方法也不起作用。

Answer 1

当您单击复选框时，如果它被选中，这意味着选中的属性现在设置为 true，然后您正在检查条件，如果它被选中，则将其设置为未选中，反之亦然，这当然不会产生任何结果。将checked 属性检查为true 后，将checked 属性设置为true，反之亦然。在这个实际示例中，这不会起到任何作用，因为您没有进行任何其他处理。

只使用类名来完成你的工作。就像下面给出的那样

<script>
    $(function(){
        $('.chk').click(function () {
            if ($(this).is(":checked")) {
                $(this).prop("checked", true );
            } else {
               $(this).prop('checked', false );
            }
        });
    });
</script>

Answer 2

你的代码差不多了，但你错过了一个东西，document.ready()

您的代码应该可以工作，更改复选框的状态没有任何问题。

相反，您的.click() 将无法正确初始化，因为 jQuery 未完全加载。好吧，也许还有另一个因素导致没有正确触发事件，但这是我可以从你提供的内容中猜到的。

<script>
$(document).ready(function() {
    $('input[type=checkbox].chk').click(function () {
        if ($(this).is(":checked")) {
            $(this).prop("checked", false);
        } else {
            $(this).prop('checked', true);
        }
    });
});
</script>