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

关于如何确保复选框实际被选中，以及如何将实际数据发布到处理脚本的任何想法？

谢谢你们。

Answer 1

问题是使用toggle -- 根据 the documentation :

The implementation also calls .preventDefault() on the event, so links will not be followed and buttons will not be clicked if .toggle() has been called on the element.

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');
    }
});

Try it out at jsFiddle .

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

文档

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