Jquery Fancyform 和 IE10：单击标签时未选中复选框

Posted 2023-05-08

【中文标题】Jquery Fancyform 和 IE10：单击标签时未选中复选框

【英文标题】：Jquery Fancyform and IE10: Checkbox does not get checked when clicking on label

【发布时间】：2015-01-03 01:12:24

【问题描述】：

所以，我有这个奇怪的 IE10-Bug（IE11 可以正常工作）：

我有一个这样的复选框：

<div class="select-row row-b">
    <p>some text</p>
    <label><input type="checkbox" name="checkboxGroupA" data-index="1" value="A1"/>A1</label>
</div>

使用Fancyform-jQuery-Plugin v 1.4.2，IE10 的 Fancyform 似乎有一个错误：

所以假装这是我的复选框（有点风格）：[A1] 单击边界内的某处（ inside [ ] ）有效。复选框被选中。但是直接点击文本（标签，“A1”）不起作用，复选框状态不会从未选中变为选中。

我添加了一个 console.log("...");在这里花式转换检查框方法：

check: function () 
                console.log("setting check");
                method.setProp(this, "checked", 1);
            ,

只是向我展示了相同的内容。当我点击标签时，不会触发“检查”。

如果能在这里得到一些提示会很棒，因为我现在没有想法了。

最好的问候， 多姆

【问题讨论】：

您提到了 IE10 和 IE11，但没有提到其他浏览器。你是说 IE10 是唯一有问题的，还是...？

您可能需要将id 属性添加到checkbox 并将for 属性添加到label 并将它们设置为相同的值

@LoganMurphy - 如果输入在标签内，这不是必需的，至少对于标准标签行为而言不是必需的（我不知道 Fancyform 对它做了什么）。

它可以在 ff/chrome/Safari 中运行 :) 我们支持 ie10 及更高版本，所以如果它可以在

【参考方案1】：

我遇到了同样的问题，这种情况下需要绑定事件，因为IE版本。

$(".select-row row-b label").bind('click',function()
   $('input',this).attr("checked",true);
)

编辑：这是我的工作代码，基于这个答案。我在这里编辑这段代码是因为你必须注意几个副作用：

this.$rowLbls = $(this.$el.find('.row-alter label')); //might be $('yourdomelement', 'yoursecond...'')
        this.$rowLbls.click(function(event) 
            var ele = $(this).find('input');
            if( $(event.target).is("label") )  //check exactly for label, because fired twice if not => would work just once
                if(ele.is(':checked'))
                    ele.prop('checked', false); //prop instead of attr for true/false
                 else
                    ele.prop('checked', true);
                
             
        );

【讨论】：

你是把它加到transformCheckbox-function（尤其是“check: ...”-part）还是其他地方？

我确实将它放在我的脚本中以与转换复选框一起使用。您可以在那里调用“检查：函数”

刚刚在您的帮助下解决了（只需添加真/假条件、prop 而不是 attr 等）谢谢 :)