JQuery 的活动和非活动复选框

Question

我正在使用 ASP.Net MVC 开发 Web 应用程序，HTML 复选框有问题 element.So 这是我的复选框视图模型：

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 代码没有 work.even 我试过了 $('input[type=checkbox].chk').change(function () {... 以及 JQuery 可用的一些其他方法，我在 Internet 上找到了这些方法，但这些方法也不起作用。

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>

Answer 2

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

仅使用 class 名称来执行您的 job.Like 下面给出的

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

JQuery 的活动和非活动复选框

Active and inactive checkbox with JQuery

html

javascript

checkbox

asp.net-mvc

jquery