2010-05-04 71 views
2

我遇到了關於replaceWith不保持移動的單選按鈕輸入狀態的問題。我準備了一個說明這個問題的簡單例子。這適用於FF和Chrome,但不適用於IE。IE和replaceWith不保留單選按鈕狀態

有沒有辦法解決這個問題?

謝謝!

jsbin:http://jsbin.com/unola4/2

代碼:

<html> 
<head> 
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
<title>IE replaceWith issue</title> 
<script type='text/javascript'> 
$(function(){ 
    $('a').click(function(e) { 
    e.preventDefault(); 
    $('#temp').replaceWith($('#window').children()); 
    }); 
}); 
</script> 
</head> 
<body> 
    <a href='#'>run replaceWith</a> 
    <p>Select a radio button and then click "run replaceWith". The value persists in FF, but not IE.</p> 
    <div id='window' style='background-color: #DDD; height: 100px;'> 
    <input id="id_received_date-days_0" type="radio" name="received_date-days" value="30" /> 
    <input id="id_received_date-days_1" type="radio" name="received_date-days" value="50" /> 
    <input type='text' name='test-test' /> 
    </div> 
    <br /> 
    <form id='foo' style='background-color: #EEE'> 
    <div id='temp'></div> 
    </form> 
</body> 
</html> 

回答

0

抓住時選中的ID,然後再更換後檢查他們:

$('a').click(function(e) { 
    e.preventDefault(); 
    var checkedOnes = $("#window input:checkbox:checked").map(function() { 
     return this.id; 
    }).get(); 
    $('#temp').replaceWith($('#window').children()); 
    $.each(checkedOnes, function(index, value) { 
     $("#" + value).attr("checked", "checked"); 
    }); 
}); 

此外,你結束了複製這些元素時複製ID。我假設在替換之後刪除舊的?重複的ID可能是問題的原因嗎?

+0

不能替換移動元素(如在添加和刪除),不克隆? replaceWith文檔中的示例指出:「從這個示例中,我們可以看到,所選元素將從舊位置移動而不是被克隆,從而替換目標。」 – copelco 2010-05-04 18:09:35