флажок с пользовательским изображением не работает в IE

Question

У меня есть флажок с пользовательским изображением. Он работает, кликабелен и работает во всех браузерах, кроме 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. У меня есть другие флажки в других формах, в которых отсутствует это скрытое поле ввода, поэтому поле флажка типа ввода является первым дочерним элементом метки.

Answer 1

Я смог исправить это сам, с помощью этой статьи: https://www.triplet.fi/blog/problem-solved-custom-checkbox-not-working-on-edge/

Как видите, у меня нет атрибута "for" на моем ярлыке.

Поэтому я отредактировал шаблон powermail typo3 для флажков и добавил «для». Теперь мои флажки выглядят так:

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

Таким же образом он работает и в IE.