带有自定义图像的复选框在 IE 上不起作用

Posted

技术标签:

【中文标题】带有自定义图像的复选框在 IE 上不起作用【英文标题】:checkbox with custom image not working on IE 【发布时间】:2019-11-02 08:20:31 【问题描述】:

我有一个带有自定义图像的复选框。它有效,可点击,并且适用于除 IE 之外的所有浏览器。

这是一个截图:

这里是复选框的 html,由 Typo3 和 Powermail-Plugin 生成。

<label class="checked">
  <input type="hidden" name="tx_powermail_pi1[field][marker_20]" value="">
  <input data-parsley-errors-container=".powermail_field_error_container_marker_20" 
data-parsley-class-handler=".powermail_fieldwrap_marker_20 
div:first > div" class="powermail_checkbox 
powermail_checkbox_172" id="powermail_field_marker_20_1" 
type="checkbox" name="tx_powermail_pi1[field][marker_20][]" 
value="Ich habe die <f:link.page pageUid=&quot;45&quot; target=&quot;_blank&quot;>Datenschutzerklärung</f:link.page> verstanden." data-parsley-multiple="tx_powermail_pi1fieldmarker_20">
  Ich habe die <a target="_blank" href="/datenschutz">Datenschutzerklärung</a> verstanden.
</label>

这是我用来切换它的 jQuery:

$(".tx-powermail input[type=checkbox]:checked").parent("label").addClass("checked");
        $(".tx-powermail input[type=checkbox]").click(function() 
        $(this).parent("label").toggleClass("checked");
        );

看起来 IE 对 Typo3 生成的隐藏输入字段有问题。我有其他形式的其他复选框缺少隐藏的输入字段,因此输入类型复选框字段是标签的第一个子元素。

【问题讨论】:

你需要jquery吗——有标签和输入的重点是你只能用css来改变它。在属性中包含标签是否有效 - 它们不应该被编码吗? 我没有制作这个 jQuery,但我认为原因是标签作为所有内容的父元素存在问题。 你不能把复选框输入放在标签之前而不是里面吗? 不,就像我说的我不能改变 html 结构,html 就是它的样子,由 Typo3 生成 嗯,无论如何我认为问题可能在于数据属性中的标签存在问题 - 您可能需要对它们进行 html 编码 【参考方案1】:

在这篇文章的帮助下,我自己修复了它:https://www.triplet.fi/blog/problem-solved-custom-checkbox-not-working-on-edge/

如您所见,我的标签中没有“for”属性。

所以我为复选框编辑了typo3 powermail 模板并添加了“for”。现在我的复选框看起来像这样:

<label class="checked" for="powermail_field_aktivmitglied_1">

这种方式在 IE 中也可以使用。

【讨论】:

以上是关于带有自定义图像的复选框在 IE 上不起作用的主要内容,如果未能解决你的问题,请参考以下文章

使用 jquery 的自定义滚动在边缘和 IE 上不起作用。?

Dojo 功能在 IE8 上不起作用

自定义后退按钮图像在导航栏上不起作用

界面生成器 UIButton 自定义背景图像在模拟器/设备上不起作用

当 url 有标签和问号时,注册自定义 URI 方案在 Windows 7 上不起作用

自定义转换类在 Vue.js 上不起作用