iOSのみ、checkboxのlabelが反応しません。

###前提・実現したいこと
CSSコンポーネントにあるサンプル「Material List with Checkboxesコンポーネント」を使ってチェックボックスを作りたい。
http://components.onsen.io/

###発生している問題・エラーメッセージ

サンプルコードをそのまま使っているのですが、labelがうまく反応しません。
iOSのみで発生してます。

###該当のソースコード

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <meta http-equiv="Content-Security-Policy" content="default-src * data:; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">

  <link rel="stylesheet" href="onsenui.css">
  <link rel="stylesheet" href="onsen-css-components.css">

</head>
<body>

<ul class="list list--material">
  <li class="list__item list__item--material">
    <div class="list__item__left list__item--material__left">
      <label class="checkbox checkbox--material">
        <input type="checkbox" id="checkbox3" class="checkbox__input checkbox--material__input">
        <div class="checkbox__checkmark checkbox--material__checkmark"></div>
      </label>
    </div>

    <label for="checkbox3" class="list__item__center list__item--material__center">
      <div class="list__item__title list__item--material__title">Notifications</div>
      <div class="list__item__subtitle list__item--material__subtitle">Allow notifications</div>
    </label>
  </li>

  <li class="list__item list__item--material">
    <div class="list__item__left list__item--material__left">
      <label class="checkbox checkbox--material">
        <input type="checkbox" id="checkbox4" class="checkbox__input checkbox--material__input" checked="checked">
        <div class="checkbox__checkmark checkbox--material__checkmark"></div>
      </label>
    </div>

    <label for="checkbox4" class="list__item__center list__item--material__center">
      <div class="list__item__title list__item--material__title">Sound</div>
      <div class="list__item__subtitle list__item--material__subtitle">Hangouts message</div>
    </label>
  </li>

</ul>

<script src="onsenui.min.js"></script>

</body>
</html>

###試したこと
一緒に読み込んでいるonsenui.min.jsを削除すると動作するようですが、削除せずに動くようにしたいです。
よろしくお願いします。

koronatail

2016/12/27 02:03

Onsen UIの質問であればタグに「Onsen UI」を追加すると専門知識を持った方に見てもらいやすくなるかもしれませんよ。

MiyakoChocho

2016/12/27 02:11

ありがとうございます！追加しました。

koronatail

2016/12/27 02:52

勉強中の身で回答らしい回答ができないので確認だけ。他に当てが無かったら確認してみてください。そもそも提示していただいたURL（http://components.onsen.io/）のTheme Rollerは、適用したいデザインにチェックボックスを付けた上で、左上のDownload Themeからテーマのセットをダウンロードして、それをセットごと適用するような使い方をするものだと認識していました。一回テーマをそのものを、上記サイトの「Material List with Checkboxesコンポーネント」を選択してDownload Themeからダウンロードしたテーマに丸ごと入れ替えてしまったらどうでしょうか。それでも状況が変わらないのであれば、Theme Rollerで当該テーマの背景色や文字色の変更をし、それぞれiOS、Androidで反映されているかどうかを確認してその結果を質問に追記すると何か参考になるかもしれません。私はMonacaという環境でしかOnsen UIを利用したことがないので具体的な確認方法を提示できないですが・・・。

MiyakoChocho

2016/12/27 07:10

返信が遅れて申し訳ありません。無事解決することができました。アドバイスありがとうございました！

行動規範の内容に同意します

回答1件

ベストアンサー

Onsen UI 開発チームの @n_matagawa です。

今回の問題は Onsen UI 内部で使用している FastClick のバグによるものと思われます。
応急処置としては、onsenui.min.js の読み込み後に ons.fastClick.destroy(); を実行することで問題の解決が可能です。

よろしくお願いいたします。

投稿2016/12/27 05:21

asial-matagawa

総合スコア164

MiyakoChocho

2016/12/27 07:08

ご回答ありがとうございます！解決することができました。 onsenui.min.js の後に以下のように記述することで問題なく動作しました。 ------------------------------------------------ window.onload = function(){ ons.fastClick.destroy(); } ------------------------------------------------

行動規範の内容に同意します