thickbox inline IE6でフォーム(チェックボックス)などのチェックがはずれる
thickboxで、インラインに表示したフォーム要素を表示した際に
IE6のみチェックボックスやラジオボタンのcheckedが外れる現象が起きた。
テストしたのは
・FirerFox3.5
・IE8
・IE7
・IE6
ソースはこんな感じ
<style> .popup{ position:absolute; bottom:0px; left:0px; background-color:black; color:white; width:100%; height:30px; text-align:center; font-size: 120%; font-weight: bold; } .popup label{ width: 150px; display: block; margin: 3px auto 0px auto; padding: 1px 0px 2px 0px; background-color: #EE5500; border: 1px solid #FFFFFF; cursor: pointer; } .popup input{ margin: 1px 2px 0px 0px; } </style> <label for="option_id7"> <input type="checkbox" name="option_id[7]" value="7" class="input_checkbox" id="option_id7" onclick="if( $(this).attr('checked') ){ $('#agree7').click(); }else{ $('#agree_option_id7').attr('checked',false); }" />保険加入 2,000円</label><br /> <a id="agree7" href="#TB_inline?inlineId=d_agree7" class="thickbox" style="display:none;"></a> <div id="d_agree7" style="display: none;"> <p>同意文章</p> <span> <label for="agree_option_id7"> <input type="checkbox" name="agree_option_id[7]" value="7" class="input_checkbox" id="agree_option_id7" onclick="$('#TB_closeWindowButton').click();" />同意する </label> </span> </div>
こうすると、IE6のみ「agree_option_id[7]」のチェックが外れてしまう。
だが、チェックボックスをテキスト領域などに変更し入力すると問題なく値が保存されている。
「同意する」チェックをクリックし、
$('#TB_closeWindowButton').click(); を実行したあとに強制的に
$(this).attr('checked','checkd');としても結果は変わらなかった。
▼以下解決方法
まず、ソースに以下のjavascriptを追加する。
<script type="text/javascript"> function agree_check(id) { $("input[name='agree_option_id["+ id +"]']").each(function(){ $(this).attr('checked','checked'); }); } </script>
次いで、
「同意する」チェックボックスのonclickを以下のようにする。
<label for="agree_option_id7"> <input type="checkbox" name="agree_option_id[7]" value="7" class="input_checkbox" id="agree_option_id7" onclick="$('#TB_closeWindowButton').click();setTimeout('agree_check(7)',1000);" />同意する </label>
こうすることでチェックすることができた。