What CSS style do I need to disable read-only text box management

Question

Just to preempt the answer "why do you want to do this" Here's what I do:

If I click on another control, I make an ajax call to get the server-generated value and fill it in the text box. Then I install the readOnly control on the client side (I do not want to be able to disable it, since I need it to go back so that Im sets the readOnly attribute).

Unfortunately, like readOnly, it does not look "disconnected"

I would like to get this disabled text block by running the .addClass command.

I dumped different styles, but I'm no closer to that.

By the way, it will be in IE (and maybe IE7 or lower, so I do not plan a style).

Any ideas gratefully received.

Answer 1

I just played with him. I will disable input elements using JS and jQuery. In the form, I have one checkbox with the class "disabler" and the elements that will be disabled are marked with the class "disableable".
Faced the same problem as you, and allowed to put it and remove the hidded field on the fly using JQuery DOM manipulation. It works correctly in browsers.
This function is associated 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");
    }
}

Answer 2

- , , .. CSS :

input.readOnlyTextBox
{
    background-color: #F2F2F2 !important;
    color: #C6C6C6;
    border-color: #ddd;
}

, , .

Answer 3

. , , , , - , . , , .

Answer 4

, , , readOnly

, , .

, " " - "". , , , .

Answer 5

.

• "dummy" CSS. , , . , .
• # 1, , . "display" , / .

Answer 6

:

"readonly" LOOK, "disabled", "style =" color: gray; background-color: # F0F0F0; ". - 28.02.2011 5:05

, !

:

style="color: grey; background-color: #F0F0F0;"

Answer 7

, CSS.

, , , , , , .

With left and top borders having a darker color, etc. So he decided to use this CSS code.

input[readonly]{
  border-color: darkgrey;
  border-style: solid;
  border-width: 1px;
  background-color: rgb(235, 235, 228);
  color: rgb(84, 84, 84);
  padding: 2px 0px;
}

Made by jsfiddle so you guys can take a closer look.

It looks good in Chrome, in other browsers you need to change the abit colors. As in Firefox, you also need to change the color and background color to etc.

background-color: rgb(240, 240, 240);
color: rgb(109, 109, 109);