これは、ベテランの UX 開発者である私を完全に困惑させます。
ユーザーが順不同リストの先頭にあるボックスをチェックしたときに開始された AJAX リクエストを介して、いくつかのコンテンツがロードされています。ボックスがチェックされている場合、リストには、それぞれ独自のチェック ボックスを含むリスト アイテムが取り込まれます。デフォルトでは、「チェック済み」の状態になっています。
この時点から、チェックボックスを右クリックして「要素を検査」すると、結果はかなり奇妙です。一番上のボックスをオンまたはオフにすると、結果は期待どおりになります。ボックスがオンまたはオフになり、インスペクターでは、これが HTML 内に反映されます。したがって、チェックすると、新しい属性が作成され (checked="checked")、状態はページ自体の HTML に表示される内容を反映します。
AJAX 経由で読み込まれたチェック ボックスの場合、結果は単純ではありません (または正しくありません)。リスト内のチェックボックスをオンまたはオフにすることは可能です。フォームを送信すると、結果は正確になります。jQuery または通常の JavaScript を使用してオンザフライで計算すると、これらのチェックボックスの値が正確に報告されます。
ただし、Chrome 開発者ツール、Firefox ドキュメント インスペクター、または Firebug 内では、これらの最近読み込まれたボックスの HTML は正確ではありません。それらは、期待どおりに同じ状態でロードされます (つまり、すべての状態が on に設定されてロードされます。たとえば、すべての場合で checked="checked")。それにもかかわらず、ブラウザー ウィンドウを介して状態を変更すると、インスペクターの HTML は更新されません。逆もまた真です。インスペクタ ウィンドウ内の HTML を更新すると、ブラウザ ウィンドウは更新されません。
これが問題に関連しているかどうかはわかりませんが、念のため含めておきます。問題のリストは、Bootstrap アコーディオンにも含まれています (デフォルトでは、「折りたたまれた」状態にありますが、流動的な UX エクスペリエンスを提供するために、AJAX を介してコンテンツが読み込まれると拡張されます)。
これまでのところ、Google Chrome、Mozilla Firefox、および Apple Safari を使用して、Windows および Mac OSX Mountain Lion でこれをテストしました。結果はすべての場合で一貫しています。なぜこれがこのように起こるのか理解できません。フィードバックをお待ちしております。
最後に 1 つ: このプロセスには AJAX 要求が関係しているため、また必要な応答を提供するサーバーがファイアウォールの背後にあるため (これは私が取り組んでいるサブスクリプション ベースのサイトであるため)、 JS Fiddle を介してこの例を提供できます。ただし、それがどのように機能するかについて誰かが意見を持っている場合は、私はその提案を受け入れており、このイライラするバグの例を喜んで提供します.
アップデート：
http://api.jquery.com/prop/にある jQuery API のドキュメントを見ると、チェックボックスの W3C 仕様では、「checked 属性の値はチェックボックスの状態によって変化しないが、checked プロパティは変化する」と示されていることに気付きました。 "。したがって、これはここで何が起こっているかの部分的な説明かもしれません。ただし、AJAX で読み込まれていないコンテンツの属性を変更すると、変更された状態がページに反映される理由、およびその逆の理由については説明されていません。