Как отследить нажатие checkbox на iphone?

[zahar_92]

Всем привет! Прошу помощи..
Есть скрипт для стилизации чекбокса с помощью псевдоэлементов. На ПК и андроид работает все норм. На айфоне ситуация такая: если тапнуть один раз, класс присвоился, галочка появилась, но сам инпут не получил атрибут checked. Если тапнуть еще раз по этому же элементу, галочка пропадает, но инпуту присваивается checked.

Если click заменить на touchenter, то инпут получает checked, но присвоение класса не проиходит. Если использовать совместно с клик, получается даблклик, что тоже не дает нужного результата. Структуру изменить не могу, генерируется из БД.
Как это исправить не прибегая к тяжелым библиотекам? В чем ошибка?

Структура

<label class="checkbox-inline"><input type="checkbox" class="rsform-checkbox">Дополнительный цокольный ввод</label>

Скрипт

$('label.checkbox-inline').each(function(){
        var checkbox = $(this).find('input[type=checkbox]');
        if(checkbox.prop("checked")) {
			$(this).addClass("active-checkbox");
		}
    });

    $('label.checkbox-inline').on('click', function(){
        var checkbox = $(this).find('input[type=checkbox]');
        if(checkbox.prop("checked")){
            $(this).removeClass("active-checkbox");
            checkbox.prop("checked", false);
        }else{
            $(this).addClass("active-checkbox");
            checkbox.prop("checked", true);
        }
    });

[Malleys]

На ПК и андроид работает все норм

Не работает, если нажать на саму галочку!

Структуру изменить не могу

А зачем её менять? Она у вас идеальна!

У вас не правильно работает скрипт: вы пытаетесь менять состояние галочки, а нужно только переключать класс в зависимости от состояния галочки.

<label class="checkbox-inline"><input type="checkbox" class="rsform-checkbox">Дополнительный цокольный ввод</label>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
	
	$("label.checkbox-inline input[type=checkbox]").on("change", function() {
		var checkbox = $(this);
		checkbox
			.closest("label.checkbox-inline")
			.toggleClass("active-checkbox", checkbox.prop("checked"));
	});
	
</script>

<style>
	
	.active-checkbox {
		background: yellowgreen;
	}
	
</style>

Хотя зачем вам подключение скрипта? Вы можете сразу применять стили к флажку, используя состояние :checked

<label class="checkbox-inline"><input type="checkbox" class="rsform-checkbox">Дополнительный цокольный ввод</label>

<style>
	
input[type="checkbox"] {
	-webkit-appearance: none;
	appearance: none;
	width: 18px;
	height: 18px;
	border-radius: 4px;
	background: linear-gradient(#474749, #606062);
	box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.15), inset 0 -1px 1px rgba(0, 0, 0, 0.15);
	outline: none;
	vertical-align: -6px;
}

input[type="checkbox"]:checked {
	background: url('data:image/svg+xml,\
		<svg xmlns="http://www.w3.org/2000/svg" \
			width="10px" height="10px" viewBox="0 0 10 10" \
			stroke="%23fff" stroke-width="1.3" stroke-linecap="round" \
			stroke-linejoin="round" fill="none"\
		>\
			<polyline points="2.3 5.1 4.2 7.2 8.0 2.2"></polyline>\
		</svg>')
		no-repeat center center / contain
		deeppink;
}
	
</style>

[zahar_92]

Дорогой ты мой человек! Все заработало, спасибо!