jQuery - 未选中复选框

Question

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

我正在使用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脚本会抛出我的一个错误，告诉我必填字段留空。

关于如何确保复选框实际被检查的任何想法，以及通过扩展，POSTS实际数据到处理脚本？

多谢你们。

Answer 1

问题是使用toggle - 根据文档 ：

该实现还在事件上调用.preventDefault（），因此如果在元素上调用了.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所指出的， on是使用> jQuery 1.7附加事件的首选方法。 如果您使用的是旧版本的jQuery，请在jsFiddle示例中使用bind 。

文档

• jQuery.toggle
• jQuery.bind
• jQuery.on