CodingForums.com - Modifying .disabled property

CodingForums.com (http://www.codingforums.com/index.php)

- JavaScript programming (http://www.codingforums.com/forumdisplay.php?f=2)

- - Modifying .disabled property (http://www.codingforums.com/showthread.php?t=256213)

Modifying .disabled property

Hi
I need to change the font color of the disabled textboxes of our application. These disabled textboxes exist at thousands of places both at pageload or disabled conditionally clientside.
I am aware that in IE8 there is no other way to change the fontcolor except use readonly. So i thought that maybe if I changed the .disabled property to something like -

Code:

Object.disabled {

    function set() {

        this.readOnly = value;

     }



    function get() {

         return this.readOnly;

     }

}

then it would make my task much easier. I searched and found out that Object.defineProperty ,may do the trick. However i am getting the mull reference error. Is there any other way?

Are you trying to change the font color of a disabled textarea? (Below)

Code:

<textarea disabled></textarea>

You should use CSS for this. Object.disabled is undefined, I think you meant to select the textarea object and then access the disabled property from there. Give us some of your code so we can see what you want to do.

Instead of changing the font color, would it be sufficient to change the background color? MSIE does support *that* in disabled fields.

But your idea of changing disabled to readonly has merit. Not hard to do.

You do realize there is a significant difference between disabled and readonly as it pertains to form submissions? A disabled field is *NOT* sent from the browser to the URL specified in a <form>'s action= property. A readonly field *IS* sent.

Now, if your form processing code doesn't care about getting a bunch of fields it maybe wasn't expecting, that won't matter.

If it does, then you would need to run through and change all the readonly's back to disabled at <form onsubmit=...> time. Again, not hard.

How do you distinguish between fields that *should* be readonly and those that are fake-disabled? best way would be to add a dummy attribute to the converted fields and then look for it when swapping back.

**********

ANYWAY... No, you can't do it as you described. You could *probably* do something similar to that using jQuery, but that would just be shorthand for doing it this way:

Code:

function changeDisabledColor( color )

{

    var inps = document.getElementsByTagName("input");

    for ( var i = 0; i < inps.length; ++i )

    {

        var inp = inps[i];

        if ( inp.disabled ) 

        {

            inp.readonly = true;

            inp.disabled = false;

            inp.style.color = color;

            inp.setAttribute("fakeDisabled", "yes"); // ONLY IF NEEDED

        }

    }

}

Then, when the <form> gets submitted, call this function to set them back *IF NEEDED*:

Code:

function restoreDisabled( )

{

    var inps = document.getElementsByTagName("input");

    for ( var i = 0; i < inps.length; ++i )

    {

        var inp = inps[i];

        if ( inp.readonly && inp.getAttribute("fakeDisabled") != null )

        {

            inp.disabled = true;

        }

    }

}

This is untested, but it should be roughly right.

If you have any non-<input> fields that need this same treatment (e.g., <select>?) they are easy to add.

Oh, and by the by, MSIE 9 has the same problem. Idiots.

@hey The code i wrote was just a tentative one. I am not using it anywhere. I just wanted to know if there is some way of overridding the .disabled property of javascript. I suppose we can't.
Also, i need to change the fontcolor for a disabled textbox and IE doesn't pick up the CSS for a disabled textbox. I can send you the code but i think this issue is pretty generic. Let me know if you need it.

@Old Pendant
In order

Nah I have been given specific requirements to change both the fontcolor and the backcolor.

Yes i know it isnt very hard to do. But its totally monotonous and time-consuming. Plus i have to change it in almost 500 pages with multiple instances on each page. :(

Our code doesnt worry about the extra elements being submitted so Thank God for that or else that wouldv'e been taxing.

Regarding your soluion, I was thinking along the same lines. However instead of doing it in javascript I used a different approach. We have our own customized textboxes and i added a similar code in the library for rendering that control. This should take care of all the permanently 'readonly' controls. However there are a huge no of textboxes which are disabled onload onclientside. For those controls i may be able to use your code or i could start changing .disabled to .readOnly. I am not sure yet which approach to follow.

Another issue here is the fields that get disabled by user interaction(checking a checkbox and stuff like that). I HAVE to change .disabled to .readonly for those fields in our code. There doesn't seem to be any other way for this.

I am facing another issue here. The readonly fields take focus. I do not want that. So i thought i could use onfocus = this.blur(); THis doesnt seem to work. Is there any other way past that. I am afraid that your anwer would be to explicitly specify the next control where the focus should go. If that's the case i might as well give up right now.