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 - 每the documentation：

该实现还会对事件调用.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');
    }
});

Try it out at jsFiddle

修改请注意，此代码显示使用on方法，而jsFiddle示例使用bind。正如Sam Sehnert所指出的，on是使用＆gt;附加事件的首选方法。 jQuery 1.7。如果您使用的是旧版本的jQuery，请使用bind，如jsFiddle示例所示。

<强>文档

jQuery.toggle

jQuery.bind

jQuery.on

jQuery - 未选中复选框

1 个答案: