jQuery - 未选中复选框

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

我正在使用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实际数据添加到处理脚本的任何想法？

谢谢你们。

来源

2012-06-27 relativelycoded

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

的问题是使用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是使用> jQuery 1.7附加事件的首选方法。如果您使用的是旧版本的jQuery，请使用bind，如jsFiddle示例中所示。

文档

来源

2012-06-27 22:58:04

请注意，从jQuery 1.7开始，您应该使用.on方法绑定事件：http：//api.jquery.com/on/。您会注意到绑定文档第一段中提到的这一点。 –

谢谢！我实际上并没有使用jQuery，所以这是一个有用的笔记。编辑答案表明这一点。 –

谢谢Chris和Sam！我经常没有太多的例子可以使用jQuery，只是来自1.4.4版本，所以这是一个渐进式的追赶游戏，让我了解一些更好的东西是如何工作的，以及如何改变一切。感谢帮助。 – relativelycoded

jQuery - 未选中复选框

回答

相关问题