jquery code does not work in IE8 compatibility mode

Question

The following code I cannot get to work (Jquery 1.4.2) It seems like the selector is not working cause it doesn't do anything after that with the id=p_quantity. I added the .remove() just to see if it was that line that was the trouble and it did not remove the textbox in compatibilty mode, works in regular mode and FF. Stumped!!!

EDIT this line does not work.

$("input[type='textbox'][name^='QTY']").attr('id','p_quantity').remove();

Funny thing is the second remove of the two image inputs work fine in IE COMP mode

<table cellspacing="0" cellpadding="3" border="0"><tr><td>
<span class="PageText_L71n">Qty</span>: <input type="textbox" name="QTY.LL24" size="3" maxlength="7" onkeydown="javascript:QtyEnabledAddToCart();" value="1">
</td><td>

                          <input type="image" src="/v/vspfiles/templates/moderntot/images/buttons/btn_addtocart.gif" name="btnaddtocart" alt="Add to cart" border="0">

     <input type="hidden" name="ReplaceCartID" value="" />
     <input type="hidden" name="ProductCode" value="LL24" />
     <input type="hidden" name="e" value="" />

      <input type="hidden" name="ReturnTo" value="ShoppingCart.asp" />

     &nbsp;<input type="image" src="/v/vspfiles/templates/moderntot/images/buttons/btn_addtowishlist.gif" name="btnaddtowishlist" alt="Add To Wish List" border="0" />

     </td></tr>

     </table>

<script type="text/javascript" language="javascript">
$(function(){
$("input[type='textbox'][name^='QTY']").attr('id','p_quantity').remove();
$("input[type='image'][name^='btnadd']").attr('id','button').remove();    
});
</script>

Answer 1

You can't change the id and name attribtues of existing form input elements in IE6/7. You need to create a whole new DOM element and replace the original with it. See also this related question.

By the way, textbox is an invalid input type, it will then default to text. You should in fact have used type="text".