ラジオ ボタン グループが変更またはクリックされたときに要素を非表示または表示するために jQuery を使用しています。Firefox などのブラウザーでは問題なく動作しますが、IE 6 および 7 では、ユーザーがページ上の別の場所をクリックしたときにのみアクションが実行されます。
詳しく言うと、ページを読み込むと、すべて正常に見えます。Firefox では、ラジオ ボタンをクリックすると、テーブルの 1 つの行が非表示になり、もう 1 つの行がすぐに表示されます。ただし、IE 6 および 7 では、ラジオ ボタンをクリックしても、ページ上のどこかをクリックするまで何も起こりません。クリックした時点で初めて、IE はページを再描画し、関連する要素を非表示にしたり表示したりします。
私が使用している jQuery は次のとおりです。
$(document).ready(function () {
$(".hiddenOnLoad").hide();
$("#viewByOrg").change(function () {
$(".visibleOnLoad").show();
$(".hiddenOnLoad").hide();
});
$("#viewByProduct").change(function () {
$(".visibleOnLoad").hide();
$(".hiddenOnLoad").show();
});
});
これが影響を受ける XHTML の部分です。ページ全体が XHTML 1.0 Strict として検証されます。
<tr>
<td>View by:</td>
<td>
<p>
<input type="radio" name="viewBy" id="viewByOrg" value="organisation"
checked="checked" />Organisation</p>
<p>
<input type="radio" name="viewBy" id="viewByProduct" value="product" />Product</p>
</td>
</tr>
<tr class="visibleOnLoad">
<td>Organisation:</td>
<td>
<select name="organisation" id="organisation" multiple="multiple" size="10">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>
</td>
</tr>
<tr class="hiddenOnLoad">
<td>Product:</td>
<td>
<select name="product" id="product" multiple="multiple" size="10">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>
</td>
</tr>
なぜこのようなことが起こるのか、またどうすれば解決できるのか、何かアイデアをお持ちの方がいらっしゃいましたら、ぜひ教えてください。