Set Textbox und Hintergrundfarbe auf Nur-Lesen in jquery

Question

Guten Tag grau,

Ich mag ein Textfeld in meinem jsp machen readonly und seine Hintergrundfarbe zu werden wie disable in Jquery grau. Das folgende ist mein Code:

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

ich lieber nicht attr('disable', 'true'); verwenden, da der Wert null wird, wenn ich Formular aus. Irgendwelche Ideen, anstatt die zweite Codezeile zu schreiben, um den Stil zu ändern?

Answer 1

gibt es zwei Lösungen anders war:

Besuch dieses 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 Hilfe.

Eine andere Möglichkeit ist die Verwendung von versteckten Eingabefeldern, wie in einigen Kommentaren erwähnt. Bedenken Sie jedoch, dass Sie im Backend-Code sicherstellen müssen, dass Sie diese neu verborgene Eingabe im richtigen Szenario validieren. Daher empfehle ich diesen Weg nicht, da es mehr Bugs erzeugt, wenn es nicht richtig behandelt wird.

Answer 2

Warum legen Sie die Kontonummer nicht in ein Div. Style es wie Sie möchten und haben dann eine versteckte Eingabe in das Formular, das auch die Kontonummer enthält. Wenn dann das Formular gesendet wird, sollte der Wert durchkommen und nicht null sein.

Answer 3

Kann disable wie unten hinzufügen und kann Daten zum Senden erhalten. so etwas wie dieses .. 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;} 

Answer 4

Wie pro Frage, die Sie dies ist das, was Sie tun können,

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

oder eine Klasse hinzufügen, in dem Sie mit dem erforderlichen Styling css

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

DEMO

Lassen Sie mich wissen, wenn die Anforderung

Answer 5

Wenn von Ihrem Browser unterstützt wird, können Sie CSS3 :read-only selector verwenden:

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