Android ярлык браузера флажок не кликабельны

Question

я работаю над отзывчивым меню CSS на основе checkbox hack

HTML:

<input type="checkbox" id="button" /> 
<label for="button" onclick>click/touch</label> 

<div> 
Change my color! 
</div> 

CSS:

/* Advanced Checkbox Hack */ 

body { -webkit-animation: bugfix infinite 1s; } 
@-webkit-keyframes bugfix { from {padding:0;} to {padding:0;} } 

input[type=checkbox] { 
position:absolute; 
top:-9999px; 
left:-9999px; 
} 

label { 
cursor: pointer; 
user-select: none; 
} 

div { 
background-color: #00F; 
} 

/* checked */ 
input[type=checkbox]:checked ~ div { 
background-color: #F00; 
} 

, которые прошли хорошо, действительный html5 и (FF, IE, Opera, Konquerer, Chrome, Maxthon), я даже придумал короткий (основанный на JS) взлом для IE8. когда я тестировал на Android 4.1.1 таблетки, меню не откроется, но в отличие от IE8 проблема не псевдо класса :checked но тот факт, что

1. нажав соответствующий флажок метки не переключает состояние флажок и
2. JS быстро исправить, чтобы имитировать щелчок, чтобы установить/снять флажок не работает, как браузер видит один click as two clicks

не работает на Android:

$('label').click(function(e) { 
e.preventDefault(); 
// alert(navigator.userAgent); 
$("input#button").trigger('click'); 
}); 

просто сохранить нормальные, я тестировал

$('label').click(function(e) { 
e.preventDefault(); 
// alert(navigator.userAgent); 
$("input#button").prop("checked",true); 
}); 

, который работает, но, конечно, только когда-либо устанавливает флажок, никогда не отменяет.

Я попробовал JS workaround using timestamps, но не смог заставить его работать.

Что больше всего меня озадачивает, так это то, что указанный пример взлома checkbox работает на этом планшете, но мое меню (не опубликовано) или этот простой form with checkboxes не меняет флажок на ярлыке.

любая идея, где я поступил не так, или как сделать андроид 4.1.1 установить/снять флажок, не вставляя флажок внутри метки (мне нужно несколько меток для того же флажка)? я могу жить с решением JS, хотя смысл заключался в том, чтобы перейти только к CSS. Благодаря

Answer 1

я закончил с использованием этого метода обхода:

$('.touch .menu label').on('tap', function(e) { 
    e.stopPropagation(); 
    e.preventDefault(); 
    var hID = $(this).prop('for'); 
    $("input#"+hID).trigger('click'); /* not tap */ 
}); 

событие крана происходит от tocca.js, но также работает с щелчком.