I have 3 radio buttons and one textbox in my page. These 3 radio controls represent corresponding choice and among them, the third one enables textbox that is disabled by default. If user clicks any one from the first twos after clicking the third, the textbox will be emptied(if user input any) and disabled again. The problem is, in IE, the textbox isn't emptied not until I click back once again on the said textbox. I've used jquery val methods as well as attr but nothing seems to work. You can see my code as follows. The very same code works just fine in Mozilla. I'm not sure why IE is having problem.
m.bind_eventform = function(){
$('input[name=poster]').change(function(){
if($('input[name=poster]:checked').val()==2) $('#poster_other').removeAttr('disabled');
else if(!($('#poster_other').is(':disabled')))
{
$('#poster_other').attr('disabled','disabled');
$('#poster_other').attr('value',''); //this one doesn't work
$('#poster_other').val(''); //as well as this one
}
});
};
$(document).ready(m.bind_eventform);
EDIT - Markup added per request
<div class="formwrapper">
<div style="float:left"><input type="radio" name="poster" value="0" checked="checked" style="float:left;">
<span style="float:left;margin:0 0 0 5px">owner</span></div>
<div style="float:left;margin-left: 80px"><input type="radio" name="poster" value="1" style="float:left;">
<span style="float:left;margin:0 0 0 5px">agent</span></div>
<div style="float:right;margin-left:40px"><input type="radio" name="poster" value="2" style="float:left;">
<span style="float:left;margin:0 0 0 5px">others</span>
<input type="text" id="poster_other" size="40" style="float:left;margin:0 0 0 5px" disabled="disabled"></div>
<div style="clear:both"></div>
</div>