title: With Javascript convert disabled input fields into readonly input fields
body: <p>I have a problem with a form in IE. I have disabled fields in form i,e. field having property <code>disabled="disabled"</code>. These fields show the input text in grey color and that looks very dull/blurred and if i try apply css changes to such fields, it will not work for IE, but works for other browsers like chrome, firefox.</p>
  
  <p>Is there any way to make the text to better font color here? </p>
  
  <p>I thought one way of doing this is removing property <code>disabled="disabled"</code> and add property <code>readonly="readonly"</code> with javascript. If this is possible then how can i do this with Javascript. I am new to Javascript, so please help me</p>
  
  <p>Below HTML to explain the behaviour. Run this in both IE and other browser to see the difference.</p>
  
  <pre><code>&lt;html&gt;
      &lt;head&gt;
          &lt;style type="text/css"&gt;
  
              .col {
                  background-color: yellow; 
                  color: red;
              }
  
          &lt;/style&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;table&gt;
              &lt;tr&gt;
                  &lt;td&gt;Editable field: &lt;/td&gt;
                  &lt;td&gt;
                      &lt;input type="text" id="editable-field-id" value="Editable field" class="col"/&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;Disabled field: &lt;/td&gt;
                  &lt;td&gt;
                      &lt;input type="text" disabled="disabled" id="disabled-field-id" value="Disabled field" class="col" /&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;Readonly field: &lt;/td&gt;
                  &lt;td&gt;
                      &lt;input type="text" readonly="readonly" id="readonly-field-id" value="Readonly field" class="col"/&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
          &lt;/table&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I am testing this in IE9.</p>