With Javascript convert disabled input fields into readonly input fields

Question

I have a problem with a form in IE. I have disabled fields in form i,e. field having property disabled="disabled". 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.

Is there any way to make the text to better font color here?

I thought one way of doing this is removing property disabled="disabled" and add property readonly="readonly" with javascript. If this is possible then how can i do this with Javascript. I am new to Javascript, so please help me

Below HTML to explain the behaviour. Run this in both IE and other browser to see the difference.

<html>
    <head>
        <style type="text/css">

            .col {
                background-color: yellow; 
                color: red;
            }

        </style>
    </head>
    <body>
        <table>
            <tr>
                <td>Editable field: </td>
                <td>
                    <input type="text" id="editable-field-id" value="Editable field" class="col"/>
                </td>
            </tr>
            <tr>
                <td>Disabled field: </td>
                <td>
                    <input type="text" disabled="disabled" id="disabled-field-id" value="Disabled field" class="col" />
                </td>
            </tr>
            <tr>
                <td>Readonly field: </td>
                <td>
                    <input type="text" readonly="readonly" id="readonly-field-id" value="Readonly field" class="col"/>
                </td>
            </tr>
        </table>
    </body>
</html>

I am testing this in IE9.

document.getElementById("textboxid").readOnly = true; try this — Harsha Venkataramu, Oct 07 '12 at 06:41
Styling 'disabled="disabled"' will work in IE. What have you tried? — Muthu Kumaran, Oct 07 '12 at 06:43
@MuthuKumaran Yes styling works like background color, borders etc, but input font color does not work in IE. See the code in update of my question. Run the code in HTML and other browsers to see the difference. — Jayy, Oct 07 '12 at 07:01

score 2 · Answer 1 · edited May 23 '17 at 12:16

You can change disabled input fields into readonly ones by using the .prop() method available in jQuery. I typically discourage the use of .attr(), and this is why.

$(function (){
    $('input').prop({
        'disabled': false,
        'readonly': true
    });
});

Although the method .removeProp() is available, documentation encourages refrain when using it, because, to quote, it "will remove the property completely and, once removed, cannot be added again to element. Use .prop() to set these properties to false instead."

View demo here: http://jsfiddle.net/teddyrised/tE98z/

score 0 · Answer 2 · answered Oct 07 '12 at 06:43

0

document.getElementById("your_field").readOnly=true;

or, with jQuery:

$('#your_field').attr('readonly', true);

answered Oct 07 '12 at 06:43

Alcides Queiroz

9,456
3
28
43

Harsha Venkataramu · Answer 3 · 2012-10-07T07:47:52.743

<html>
    <head>
        <style type="text/css">

            .col {
                background-color: yellow; 
                color: red;
            }

        </style>

    </head>
    <body>
        <table>
            <tr>
                <td>Editable field: </td>
                <td>
                    <input type="text" id="editable-field-id" value="Editable field" class="col"/>
                </td>
            </tr>
            <tr>
                <td>Disabled field: </td>
                <td>
                    <input type="text" disabled="disabled" id="disabled-field-id" value="Disabled field" class="col" />
                </td>
            </tr>
            <tr>
                <td>Readonly field: </td>
                <td>
                    <input type="text" readonly="readonly" id="readonly-field-id" value="Readonly field" class="col"/>
                </td>
            </tr>
        </table>
        <script type = "text/javascript">
            document.getElementById("disabled-field-id").disabled = false;
            document.getElementById("disabled-field-id").readOnly = true;
        </script>

    </body>
</html>

It's supposed work on IE6 and above! Will try a fiddle and post it here. — Harsha Venkataramu, Oct 07 '12 at 07:31
oh,by the way,in the above code,the textField is changed from disabled to readonly.Nothing major! — Harsha Venkataramu, Oct 07 '12 at 07:43

Diogo Rodrigues · Answer 4 · 2015-05-08T23:40:26.720

Use the setAttribute property. Note in example that if select 1 apply the readonly attribute on textbox, otherwise remove the attribute readonly.

http://jsfiddle.net/baqxz7ym/2/

document.getElementById("box1").onchange = function(){
  if(document.getElementById("box1").value == 1) {
    document.getElementById("codigo").setAttribute("readonly", true);
  } else {
    document.getElementById("codigo").removeAttribute("readonly");
  }
};

<input type="text" name="codigo" id="codigo"/>

<select id="box1">
<option value="0" >0</option>
<option value="1" >1</option>
<option value="2" >2</option>
</select>

score 0 · Answer 5 · answered Oct 18 '17 at 15:16

if you disable the inputs programmatically can set style as you want

try it:

    //bloqueo todos los radiobuttons y checkboxs
  //block all radiobuttons and checkbox
    jQuery(document).on("change", 'input:checkbox.yourClass,input:radio.yourClass', function () {
    jQuery(this).prop("checked", false);
  });
  //bloqueo campos de texto
  //block all text fields
  jQuery(document).on("focusin", 'input.yourClass, textarea.yourClass', function () {
    jQuery(this).blur();
  });
  //bloqueo selects
  //block all selects
  jQuery(document).on("focusin", 'select.yourClass', function (event) {
    var $selectDiabled = jQuery(this).attr('disabled', 'disabled');
    setTimeout(function(){ $selectDiabled.removeAttr("disabled"); }, 30);
  });

if you want set style they aren't technically disabled

here can see the original code: https://jsfiddle.net/9kjqjLyq/

Sean Vaughn · Answer 6 · 2012-10-07T08:03:48.767

You need to depend on a pure javascript(preferrably jQuery) solution.

Add a custom attribute to all your controls:

<input type="text" disabled="true" />

Now you can check if they are disabled and you can proceed to block them using javascript:

var value = yourTextBox.value;    //the last value that the control holds,
                                  //before it was disabled?

$('yourTextBox').click(function() {
    value = $(this).value;
});

$('yourTextBox').blur(function() {
    if($(this).attr('disabled') == 'true')
        $(this).value = value;
});

To add more strictness, add another function:

$('yourTextBox').keypress(function() {
    if($(this).attr('disabled') == 'true')
        $(this).value = value;
});

If you want something simple, I would recommend this:

$('yourTextBox').keypress(function() {
    if($(this).attr('disabled') == 'true')
        return false;
});

Where by "pure Javascript" you mean "JavaScript including the jQuery library"... Also, `.Value` should be `.value` (lowercase "v"). — nnnnnn, Oct 07 '12 at 07:50

With Javascript convert disabled input fields into readonly input fields

6 Answers6