CheckBoxFor 数据切换更改事件不起作用？ jQuery答案

【问题标题】：CheckBoxFor data toggle on change event not working ? JqueryCheckBoxFor 数据切换更改事件不起作用？ jQuery
【发布时间】：2020-08-25 06:24:04
【问题描述】：

如果检查为真，我正在尝试使用此 jquery 代码来提醒更改，

 $("#NSupport").change(function () {
            var tid = this.id;

            if ($(this).is(":checked")) {
                alert("inside");
            }
        });

这是我的复选框，

@Html.CheckBoxFor(model => model.NSupport, new { data_toggle = "toggle",data_width = "100", data_on = "yes", data_off = "No", data_offstyle = "info" })

谁能知道它为什么不调用 jquery 函数？

编辑，

我只是使用这段代码来提醒“爸爸”，但只在页面加载时使用，

  $('#NSupport').toggle(
            function () {
                $('.check').attr('Checked', 'Checked');
                alert('mom');
            },
            function () {
                $('.check').removeAttr('Checked');
                alert('dad');
            }
        );

【问题讨论】：

jquery 脚本在页面顶部还是底部的位置？文档中的脚本准备好了吗？浏览器的开发工具是否有控制台错误？
它在底部，没有错误
你试过$(document).on("change", "#NSupport", function() ...吗？
注意：.toggle 是 .show/.hide 的同义词 - 当复选框“切换”时不会发生事件，因此在开始时运行，第一个 arg 是持续时间，第二个是 oncomplete - 所以在启动时运行，因为它会立即切换可见性。 api.jquery.com/toggle
就在您的 $("#NSupport").change 之前添加行 console.log($("#NSupport").length) - 如果当时它是 0/零，那么该事件没有任何附加内容，您需要事件委托或稍后调用它跨度>

标签： javascript c# jquery toggle

【解决方案1】：

将 javascript 代码放入 jQuery onready 事件中，例如：

$(document).ready(function () {
    $("#NSupport").change(function () {
        var tid = this.id;

        if ($(this).is(":checked")) {
            alert("inside");
        }
    });
});

编辑：包括主视图和部分视图

Index.cshtml 看起来像：

@model WebApi.Models.mvcempmodel
@{ 
    Layout = null;
}
<html>
<body>    
    <div class="container body-content">
        <div>This is my Index.cshtml</div>
        @Html.Partial("ViewCheckBox", Model)        
    </div>

    <script src="~/Scripts/jquery-3.3.1.min.js"></script>
    <script>
        $(document).ready(function () {
            $("#NSupport").change(function () {
                if ($(this).is(":checked")) {
                    alert("inside");
                }
            });
        });
    </script>
</body>
</html>

部分 cshtml 看起来像：

@model WebApi.Models.mvcempmodel


@Html.CheckBoxFor(model => model.NSupport, new { data_toggle = "toggle", data_width = "100", data_on = "yes", data_off = "No", data_offstyle = "info" })

【讨论】：

它不工作并且没有显示任何错误。此复选框处于局部视图中
@Doc 不要将您的 javascript 放在局部视图中。将脚本放在父视图上。这就是它不起作用的原因。
@tontonsevilla 处于局部视图中
@Doc 检查这个Is it OK to put JavaScript in Partial Views。