Android浏览器复选框标签不能点击

我正在基础上，checkbox hack Android浏览器复选框标签不能点击

HTML一个响应CSS菜单上的工作：

<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和在Windows和Linux桌面（FF，IE，Opera，Konquerer，Chrome，Maxthon）上成功测试过，我甚至为IE8提供了一个简短的（基于JS的）黑客攻击。当我在Android 4.1.1平板电脑进行测试，菜单不会打开，但与IE8的问题不是伪类:checked但事实上，

窃听相关的复选框标签不切换复选框状态和
一个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，但无法使其正常工作。

最令我感到困惑的是，上述的复选框hack示例适用于该平板电脑，但我的菜单（未发布）或此简单form with checkboxes不会更改标签单击上的复选框。

任何想法，我错了，或如何使android 4.1.1设置/取消设置复选框没有嵌套复选框内的标签（我需要同一个复选框的多个标签）？即使重点仅仅是CSS，我也可以用JS解决方案。由于

来源

2014-09-04 rotezecke

我结束了使用此解决方法：

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

敲打事件从tocca.js茎，但还与点击。

来源

2014-10-02 23:23:49 rotezecke

嗨，谢谢你！在我的Android手机上，只需添加下面的CSS，就可以解决标签无法正常打开的问题。 body {-webkit-animation：bugfix infinite 1s; } @ -webkit-关键帧修正错误{{从填充：0;}到{填充：0;}} 你认为这是所有的需要，或者我应该添加你必须支持旧的Android版本的jQuery代码？ – user1610904 2015-04-22 20:35:33

我放弃了复选框黑客攻击，发生了更多问题，主要是各种Android设备。该CSS也造成上看到Safari浏览器海量内存泄漏。我最后写的各种问题，使很多jQuery的修复，我定居在最后一个jQuery菜单。 – rotezecke 2015-04-23 23:57:21

Android浏览器复选框标签不能点击

回答

相关问题