web-dev-qa-db-fra.com

Définit la zone de texte sur readonly et la couleur d’arrière-plan sur gray in jquery

Bonne journée,

Je voudrais faire une zone de texte dans mon jsp pour devenir readonly et sa couleur de fond en gris comme disable dans Jquery. Voici mon code :

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

Je ne préfère pas utiliser attr('disable', 'true');, car la valeur deviendra nulle lorsque je soumettrai un formulaire. Des idées au lieu d'écrire la deuxième ligne de code pour changer le style?

javascriptjqueryjspbackground-color
21
Panadol Chong

il y a 2 solutions:

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

J'espère que cette aide.

Un autre moyen consiste à utiliser un champ de saisie masqué, comme mentionné par certains commentaires. Cependant, gardez à l'esprit que, dans le code de base, vous devez vous assurer de valider cette entrée nouvellement masquée au bon scénario. Par conséquent, je ne le recommande pas, car cela créera plus de bugs s'il ne se gère pas correctement.

41
Alex

Selon votre question c'est ce que vous pouvez faire

[~ # ~] 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
});

ou ajouter une classe dans vous css avec le style requis

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

DÉMO

Faites-moi savoir si l'exigence était différente

7
Raunak Kathuria

Si votre navigateur le permet, vous pouvez utiliser CSS3 :read-only sélecteur :

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

Pourquoi ne placez-vous pas le numéro de compte dans une div. Donnez-lui le style que vous souhaitez, puis indiquez une entrée masquée dans le formulaire contenant également le numéro de compte. Ensuite, lorsque le formulaire est soumis, la valeur doit arriver et ne pas être nulle.

0
peinearydevelopment

Peut ajouter désactiver comme ci-dessous et peut obtenir des données sur soumettre. quelque chose comme ceci .. [~ # ~] démo [~ # ~]

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