webentwicklung-frage-antwort-db.com.de

Setze das Textfeld auf readonly und die Hintergrundfarbe auf grey in jquery

Schönen Tag,

Ich möchte ein Textfeld in meinem jsp erstellen, um readonly zu werden, und dessen Hintergrundfarbe grau wie disable in Jquery. Folgendes ist mein Code:

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

Ich bevorzuge nicht die Verwendung von attr('disable', 'true');, da der Wert beim Senden des Formulars null wird. Irgendwelche Ideen, anstatt eine zweite Codezeile zu schreiben, um den Stil zu ändern?

javascriptjqueryjspbackground-color
21
Panadol Chong

es gibt 2 Lösungen:

besuchen Sie diese 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');

Ich hoffe das hilft.

Eine andere Möglichkeit ist die Verwendung von versteckten Eingabefeldern, wie in einigen Kommentaren erwähnt. Beachten Sie jedoch, dass Sie im Backend-Code sicherstellen müssen, dass Sie diese neu ausgeblendete Eingabe im richtigen Szenario validieren. Daher kann ich diesen Weg nicht empfehlen, da er mehr Fehler verursacht, wenn er nicht richtig gehandhabt wird.

41
Alex

Je nachdem, was Sie fragen, können Sie dies tun

[~ # ~] 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 fügen Sie eine Klasse in Ihrem CSS mit dem erforderlichen Stil hinzu

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

DEMO

Lassen Sie mich wissen, ob die Anforderung anders war

7
Raunak Kathuria

Wenn Ihr Browser dies unterstützt, können Sie CSS3 :read-only Selektor :

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

Warum platzieren Sie die Kontonummer nicht in einem div. Gestalte es nach deinen Wünschen und habe dann eine versteckte Eingabe in dem Formular, das auch die Kontonummer enthält. Wenn das Formular gesendet wird, sollte der Wert durch und nicht null sein.

0
peinearydevelopment

Kann hinzufügen, deaktivieren wie unten und kann Daten bei der Übermittlung erhalten. so etwas .. [~ # ~] 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