Set textbox to readonly and background color to grey in jquery

Question

Good day,

I would like to make a text box in my jsp to become readonly and its background color to grey like disable in Jquery. The following is my code :

if(a)
  $('#billAccountNumber').attr('readonly', 'true');

I not prefer using attr('disable', 'true');, because the value will become null when I submit form. Any ideas instead of write second line of code to change the style?

Psychogenic

Is it possible for you to create a variable for the disabled field and once you submit you can use that variable instead of pulling it out. this way you should not get a NULL value. – Tva

This is a good idea, but I need to changed a lot in my backend code, thus, I would prefer use back the same variable. – Psychogenic

Perhaps disabled = true? – Euphony

disabled = true will make the value to null when I submit form. – Psychogenic

Can you check this jsfiddle.net/raunakkathuria/67ggg if this is what you need – Holub

Answer 1

there are 2 solutions:

visit this jsfiddle

in your css you can add this:
     .input-disabled{background-color:#EBEBE4;border:1px solid #ABADB3;padding:2px 1px;}

in your js do something like this:
     $('#test').attr('readonly', true);
     $('#test').addClass('input-disabled');

Hope this help.

Another way is using hidden input field as mentioned by some of the comments. However bear in mind that, in the backend code, you need to make sure you validate this newly hidden input at correct scenario. Hence I'm not recommend this way as it will create more bugs if its not handle properly.

Bookstall

Add color inside, .input-disabled{background-color:#EBEBE4;border:1px solid #ABADB3;padding:2px 1px;color:rgb(84, 84, 84);} , perfect. – Psychogenic

Answer 2

As per you question this is what you can do

HTML

<textarea id='sample'>Area adskds;das;dsald da'adslda'daladhkdslasdljads</textarea>

JS/Jquery

$(function () {
    $('#sample').attr('readonly', 'true'); // mark it as read only
    $('#sample').css('background-color' , '#DEDEDE'); // change the background color
});

or add a class in you css with the required styling

$('#sample').addClass('yourclass');

DEMO

Let me know if the requirement was different

Holub

In case anyone is considering the second option: I was able to add a class to change the background color but the events related to that class do not fire for the object that has the new class. – Navada

Answer 3

If supported by your browser, you may use CSS3 :read-only selector:

input[type="text"]:read-only {
    cursor: normal;
    background-color: #f8f8f8;
    color: #999;
}

Inclusive

Answer 4

Why don't you place the account number in a div. Style it as you please and then have a hidden input in the form that also contains the account number. Then when the form gets submitted, the value should come through and not be null.

Skiascope

Answer 5

Can add disable like below and can get data on submit. something like this .. DEMO

Html

<input type="hidden" name="email" value="email" />
<input type="text" id="dis" class="disable" value="email"   name="email" >

JS

 $("#dis").attr('disabled','disabled');

CSS

    .disable { opacity : .35; background-color:lightgray; border:1px solid gray;}

Lagoon