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

【问题标题】：Set textbox to readonly and background color to grey in jquery在jquery中将文本框设置为只读并将背景颜色设置为灰色
【发布时间】：2014-01-28 20:56:37
【问题描述】：

早安，

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

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

我不喜欢使用attr('disable', 'true');，因为当我提交表单时该值将变为空。除了写第二行代码来改变风格有什么想法吗？

【问题讨论】：

您是否可以为禁用的字段创建一个变量，一旦您提交，您就可以使用该变量而不是将其拉出。这样你就不应该得到一个 NULL 值。
这是个好主意，但是我需要在后端代码中进行很多更改，因此，我更喜欢使用相同的变量。
或许disabled = true?
disabled = true 在我提交表单时会将值设为 null。
如果这是你需要的，你能检查一下jsfiddle.net/raunakkathuria/67ggg吗

标签： javascript jquery jsp background-color

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

有两种解决方案：

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

希望对您有所帮助。

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

【讨论】：

在里面添加颜色，.input-disabled{background-color:#EBEBE4;border:1px solid #ABADB3;padding:2px 1px;color:rgb(84, 84, 84);}，完美。

【解决方案3】：

根据你的问题，这是你可以做的

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
});

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

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

DEMO

如果要求不同，请告诉我

【讨论】：

如果有人正在考虑第二种选择：我能够添加一个类来更改背景颜色，但与该类相关的事件不会为具有新类的对象触发。跨度>

【解决方案4】：

可以像下面这样添加禁用，并且可以在提交时获取数据。像这样的东西.. 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;}

【讨论】：

【解决方案5】：

为什么不把帐号放在一个 div 中。随意设置样式，然后在包含帐号的表单中隐藏输入。然后当表单被提交时，该值应该通过并且不为空。

【讨论】：