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?
This question is related to
javascript
jquery
jsp
background-color
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.
If supported by your browser, you may use CSS3 :read-only selector:
input[type="text"]:read-only {
cursor: normal;
background-color: #f8f8f8;
color: #999;
}
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;}
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.
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');
Let me know if the requirement was different
Source: Stackoverflow.com