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

2021/01/29 13:31 · jquery ·  · 0评论

美好的一天,

我想在我的文本框jsp成为readonly和它的背景颜色变成灰色,像disable在Jquery中。以下是我的代码:

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

我不喜欢使用attr('disable', 'true');,因为在提交表单时该值将为null。有什么想法可以代替编写第二行代码来更改样式吗?

有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');

希望对您有所帮助。

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

根据您的疑问,这是您可以做的

的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');

演示

让我知道需求是否有所不同

如果浏览器支持,则可以使用CSS3:read-only选择器

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

为什么不将帐号放在div中。根据需要设置其样式,然后在表单中也包含帐号的隐藏输入。然后,在提交表单时,该值应为真,并且不能为null。

可以添加如下所示的禁用,并可以在提交时获取数据。像这样..
演示

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;}
本文地址:http://jquery.askforanswer.com/zaijqueryzhongjiangwenbenkuangshezhiweizhidubeijingyanseshezhiweihuise.html
文章标签: ,   ,   ,  
版权声明:本文为原创文章,版权归 admin 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!