web-dev-qa-db-ja.com

jqueryでテキストボックスを読み取り専用に設定し、背景色をグレーに設定します

良い一日、

jspにテキストボックスを作成してreadonlyにし、その背景色をJqueryのdisableのように灰色にします。以下は私のコードです：

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

フォームを送信すると値がnullになるため、attr('disable', 'true');の使用は好ましくありません。スタイルを変更するために2行目のコードを書く代わりに、何かアイデアはありますか？

javascriptjqueryjspbackground-color
21
Panadol Chong

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

この助けを願っています。

別の方法は、いくつかのコメントで言及されているように、非表示の入力フィールドを使用することです。ただし、バックエンドコードでは、この新しく隠された入力を正しいシナリオで検証する必要があることに注意してください。したがって、適切に処理しないとさらにバグが発生するため、この方法はお勧めしません。

41
Alex

あなたの質問によると、これはあなたができることです

[〜＃〜] 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 [〜＃〜]

要件が異なるかどうかを教えてください

7
Raunak Kathuria

ブラウザでサポートされている場合は、 CSS3 :read-onlyセレクター ：

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

Divにアカウント番号を入れてみませんか。好きなようにスタイルを設定してから、アカウント番号を含むフォームに入力を隠します。次に、フォームが送信されると、値はnullでなく通過する必要があります。

0
peinearydevelopment

以下のような無効化を追加し、送信時にデータを取得できます。このようなもの.. [〜＃〜] 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;}
0
Neha