javascript - JQuery 的事件和非事件复选框

Question

我正在使用 ASP.Net MVC 开发 Web 应用程序，并且 HTML 复选框元素有问题。所以这是我的复选框的 ViewModel:

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

你的代码就快完成了，但是你错过了一件事，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>