时间戳

首页 > 解决方案 > 带有自定义图像的复选框在 IE 上不起作用

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

问题描述

我有一个带有自定义图像的复选框。它工作，它是可点击的，它适用于所有浏览器，除了 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 生成的隐藏输入字段有问题。我有其他形式的其他复选框缺少隐藏的输入字段，因此输入类型复选框字段是标签的第一个子元素。

标签： jquerycssformsinternet-explorercheckbox

解决方案

在这篇文章的帮助下，我能够自己修复它：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 中工作。

推荐阅读