jQuery - 复选框未被选中

Question

jQuery - 复选框未被选中

3

我在一个注册表单中使用复选框来切换一些多列表的启用和禁用状态。复选框上标有该类别，而多列表包含属于该类别的项目。

我正在使用jQuery 1.7.2。

        $('#sch_cat_hockeyschools').toggle(function(ev) {
                ev.stopPropagation();
                $("#type_select_hockeyschools").prop("disabled", false);
                $("#type_select_hockeyschools").removeProp("disabled", "disabled");
                $("#sch_cat_hockeyschools").prop("checked", true);
                $("#sch_cat_hockeyschools").prop("checked", "checked");
            }, function(ev) {
                ev.stopPropagation();
                $("#type_select_hockeyschools option:selected").removeAttr("selected");
                $("#type_select_hockeyschools").prop("disabled", true);
                $("#type_select_hockeyschools").prop("disabled", "disabled");
                $("#sch_cat_hockeyschools").prop("checked", false);
                $("#sch_cat_hockeyschools").removeProp("checked");
            });

对应复选框HTML示例：

<input class="catmark" type="checkbox" name="sch_categories[]" id="sch_cat_hockeyschools" value="1" />General Hockey Schools
<input class="catmark" type="checkbox" name="sch_categories[]" id="sch_cat_springhockey" value="2" />Spring Hockey

问题在于点击复选框后，它没有被选中或勾选；它立即返回到未选中状态，我认为 stopPropagation()函数会有帮助。但是显然不行。多个列表如预期一样启用和禁用，但复选框未被选中。

这个问题的结果是当表单提交时，包含所选类别的数组为空；因此，由于至少一个选定的类别是表单中必填字段之一，在处理表单的 PHP 脚本中会引发我的错误之一，告诉我必填字段已留空。

有什么想法确保复选框实际被选中，并通过扩展，将实际数据POST到处理脚本吗？

谢谢大家。

- relativelycoded

为什么不使用默认的浏览器行为来控制复选框呢？ - TNC

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Chris Baker · Accepted Answer

问题出在使用了toggle函数，根据文档所述:

如果在一个元素上调用 .toggle() 方法，则该元素的默认行为会被阻止。这意味着链接不会被访问，按钮不会被单击。

也就是说，toggle本身已经调用了preventDefault函数，导致事件的默认行为即勾选/取消勾选被阻止。

因此，建议使用bind或者on函数（见下文编辑注释）来添加change事件监听器，以检查状态。

$('#sch_cat_hockeyschools').on('change', function () {
    if (this.checked) {
        // do stuff for a checked box   
        console.log('check is on');
    } else {
        // do stuff for an unchecked box        
        console.log('check is off');
    }
});

在 jsFiddle 上尝试。

编辑请注意，此代码显示了使用 on 方法的方式，而 jsFiddle 示例使用的是 bind。正如 Sam Sehnert 所指出的那样，对于 jQuery 1.7 及以上版本，on 是附加事件的首选方法。如果您使用较旧的 jQuery 版本，请像 jsFiddle 示例中一样使用 bind。

文档