在jquery中将文本框设置为只读，将背景颜色设置为灰色

美好的一天，

我想在我的jsp创建一个文本框，使其成为readonly ，其背景颜色为灰色，如Jquery中的disable 。 以下是我的代码：

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

我不喜欢使用attr('disable', 'true'); ，因为当我提交表单时，该值将变为null。 任何想法而不是写第二行代码来改变风格？

Answer 1

有两种解决方案：

访问这个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'); 

希望这有帮助。

另一种方法是使用一些注释中提到的隐藏输入字段。 但请记住，在后端代码中，您需要确保在正确的情况下validation这个新隐藏的输入。 因此我不推荐这种方式，因为如果它处理不当会产生更多错误。

Answer 2

根据你的问题，这就是你能做的

HTML

 Area adskds;das;dsald da'adslda'daladhkdslasdljads 

JS / jQuery的

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

或者在你的css中添加一个具有所需样式的类

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

DEMO

如果要求不同，请告诉我

Answer 3

如果您的浏览器支持，您可以使用CSS3 :read-only选择器 ：

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

Answer 4

为什么不将帐号放在div中。 根据需要设置样式，然后在包含帐号的表单中隐藏输入。 然后，当表单被提交时，值应该通过而不是null。

Answer 5

可以像下面一样添加禁用，并可以提交数据。 像这样的东西.. 演示

HTML

JS

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

CSS

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