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 脚本会引发我的一个错误，告诉我必填字段留空。

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

多谢你们。

4

1 回答 1

4

问题是使用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，请使用bindjsFiddle 示例中的方法。

文档

于 2012-06-27T22:58:04.533 回答