user129345 user129345 - 1 year ago 62
Javascript Question

What's the CSS style I need to make a readonly textbox control look disabled

Just to pre-empt the 'why do you want to do this' replies Here's what I'm doing:

If another control is clicked I make an ajax call to get a server generated value and stuff it in the textbox. I then, on the client-side, set the control to readOnly (I don't want to control to be disabled as I need it to postback so Im setting the readOnly attribute).

Unfortunately as readOnly it doesn't look 'disabled'

I'd like to get that disabled textbox look by doing an .addClass.

I've mucked around with various styles but I'm no closer to getting that look.

By the way this will be in IE (and could be IE7 or lower so no outline style I'm afraid).

Any ideas gratefully received.

Answer Source

I have just played with it. I am disabling input items using JS and JQuery. On a form I have one checkbox with "disabler" class and items that are going to be disabled marked with "disableable" class.
Faced the same problem as you and resolved it putting and removing hidded field on the fly using JQuery DOM manipulation. Works correct across the browsers.
This function is bound with disabler.onClick and form.onLoad:

$.My.InitDisabler = function() {
    if (!$('.disabler').attr('checked')) {
        $('.disableable').each(function() {
            $(this).attr("disabled", "true");
            var templ = '<input name="{0}" type="hidden" value="{1}" class="disable_hdn" />';
            $(this).after($.format(templ, $(this).attr("name"), $(this).val()));
        });
    }
    else {
        $('.disable_hdn').remove();
        $('.disableable').removeAttr("disabled");
    }
}
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download