css - チェックボックスiPadでのラベルクリック

Question

私はLableタグでいくつかのチェックボックスを使用しましたが、その背後にある理由は、ユーザーが適切なチェックボックスを選択するテキストをクリックした場合ですが、iPadでこれをテストすると、ユーザーが直接チェックボックスをクリックすると正常に動作しますが、テキストをクリックするとうまくいきませんデスクトップでのような応答

このリンクを確認してください

Answer 1

私はこの問題を抱えていました。簡単な CSS の修正についてブログに書いています: http://www.tjcafferkey.me/problems-clicking-input-label-select-ios-safari/

CSS は単純です。

label > * {
  pointer-events:none;
}

Answer 2

これらの 2 つの質問 ( 3035954、7358781 ) から学ぶと、必要な動作を生成するハックがあるようです。

各ラベルに空の onclick ハンドラを追加すると、次のように機能するはずです。

<label onclick=""><input type="checkbox"> Checkbox</label>

または、代わりに、邪魔にならない JavaScript を使用してこれを行うこともできます。

$('label').click(function(){});

Answer 3

ID/FOR の組み合わせを単純に使用してみましたか?

<input type="checkbox" id="mycheckbox" />

<label for="mycheckbox">Click here</label>