iPhone/iPad/iPod touch の Mobile Safari は、デフォルトでは label
要素をタップしても関連付けたフォームフィールドの click
イベントを代行しない。
つまり、<label for="checkbox1">
などと指定しても、label
タップで checkbox1
の選択状態は変化しない。
これを fix するために、ページロード時などに予め各 label
の click
イベントへ何らかの function をバインドする(function がバインドされてさえいれば良いので、特に何か処理をする必要はない)。
この挙動は iOS だけでなく Android の WebKit 系ブラウザでも同様みたい。
var fn = function(){}; (function(b) { b.onload = function() { Array.prototype.slice.apply(b.querySelectorAll('label[for]')).forEach(function(l) { l.onclick = l.onclick || fn; }); b = null; }; })(document.body); /* jQuery や zepto.js、jqMobi を使った場合 */ $(function() { $('label[for]').on('click', fn); });
こちらの検証ページを Mobile Safari で開くと、text2
の label
以外は fix されているはず。