概要 ▶ Mozilla pins (wallpaper) by flod「Firefoxでリロードした時に要素をjQueryの「:eq(n)」で選択しようとしても正しく選択できない」の解決編です。「jQueryで要素を並び替えて、要素内の指定したradioボタンをdisabledにする」ということを行うJavaScriptを書いたページをFirefox 11でリロードすると、指定したradioボタン以外も
本ページはプロモーションが含まれている場合があります
本ページはプロモーションが含まれている場合があります
Mozilla pins (wallpaper) by flod
「Firefoxでリロードした時に要素をjQueryの「:eq(n)」で選択しようとしても正しく選択できない」の解決編です。
「jQueryで要素を並び替えて、要素内の指定したradioボタンをdisabledにする」ということを行うJavaScriptを書いたページをFirefox 11でリロードすると、指定したradioボタン以外もdisabledになってしまう…といった問題が発生しました。
この問題を解決します。
とはいってもFirefox自体を修正しているわけではないので、根本的な解決策ではありませんが。
解決策は至って簡単です。
この問題への考察
今回の問題はブラウザのキャッシュの問題と考えています。ページをロードした初回はこの問題は発生せず、リロード時で発生します。
また、スーパーリロード（Shiftキーを押しながらリロードボタン）では、この問題は再現されませんでした。
このため、ブラウザのキャッシュに残っている要素にdisabledの属性が付いてしまっているのではないかと考えました。
ただ、キャッシュを消してリロードしても、「Web Developer」の機能拡張（アドオン）をインストールし、「キャッシュを無効にする」設定でリロードしても、意図しないradioボタンがdisabledになってしまう問題は発生してしまうので、単純なブラウザのキャッシュというわけではないようです。
解決方法
指定した要素のdisabledの属性を「true」と設定する前に、全ての要素のdisabledの属性を「false」に設定します。かなり力業ですが、別の要素に次々とdisabledの属性が転移してしまうような状態なので、処理前に初期化のごとく、falseの値を設定します。
今回の例だと以下のJavaScriptを付け加えます。
jQuery("#form-20120405 dd input").attr("disabled",false);
最終的にできたJavaScriptは以下の通りです。
<script type="text/javascript">
jQuery(document).ready(function(){
var array_dt = jQuery("#form-20120405 dt");
var array_dd = jQuery("#form-20120405 dd");
jQuery("#form-20120405 dl").empty()
.append(jQuery(array_dt.get(0)),
jQuery(array_dd.get(0)),
jQuery(array_dd.get(2)),
jQuery(array_dd.get(3)),
jQuery(array_dd.get(1)),
jQuery(array_dd.get(4)),
jQuery(array_dd.get(5)));
jQuery("#form-20120405 dd input").attr("disabled",false);
jQuery("#form-20120405 dd:eq(1) input").attr("disabled",true);
}):
</script>
動作検証用の実例
動作検証用の実例を以下に作ってみました。リロードしても意図しないradioボタンがdisabledにはならないのが確認できると思います。この問題はmozillaに報告すれば良いのかしら。
どうしたら良いのでしょうかねぇ…。