why doesn't IE8 refresh textbox right away?(Jquery)_问答_开发者

why doesn't IE8 refresh textbox right away?(Jquery)

开发者 https://www.devze.com 2022-12-26 17:33 出处：网络

I have 3 radio buttons and one textbox in my page. These 3 radio controls, representing corresponding choices and among them, the third one enables textbox that is disabled by default. If user clicks

I have 3 radio buttons and one textbox in my page. These 3 radio controls, representing corresponding choices 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="radi开发者_运维知识库o" 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>

Have you tried this

$('#poster_other').val('');

before calling:

$('#poster_other').attr('disabled','disabled');

Maybe you can setup a http://www.jsbin.com page with the non-working code

Make sure your IE is running in IE8 browser mode and IE8 document mode (Check in Tools.Developer Tools). Sometimes it runs under Quirks or compatibility mode and that can cause problem.

This is what I do to make sure IE8 is rendering my html in IE8 mode.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html>
<head>      
    <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=8" />

The important part is the X-UA-Compatible meta tag.

Just found the culprit with the help of Jsbin. It's jquery 1.3.2 bugs which causing this problem. After change using to 1.4.0, it works as I wanted. Thanks to all for prompt replies. Cheers