Comment définir la propriété readonly de la dynamique de la zone de texte à l'aide de jQuery?

Je suis en train de remplir une zone de texte à partir de DB valeurs et je veux mettre de zone de texte valeur en lecture seule. Lorsque l'utilisateur clique sur une option MODIFIER, puis définissez toutes les zones de texte devienne modifiable. Je n'ai pas réussi à atteindre cet objectif. Voici mon code HTML:

<html>
  <head> 
    <script>
      $(document).ready(function() {  
        $('#contentid :input').each(function() {
          $(this).attr("disabled",true);
        });

      $('#edit').on('click',function() {
        $('#contentid :input').each(function() {
          $(this).attr('disabled',false);});
        });
     });
   </script>
</head>

<body>
  <div data-role="page" id="viewInformation" data-theme="d" data-add-back-btn="true" data-back-btn-text = "back">
    <div data-role="header" id="headerid" class="ui-bar ui-bar-b">
      <h3></h3> 
    </div>

    <div data-role="content" id="contentid">
      <a href="#" id="saveDBValue" data-role="button" data-mini="true" style="width:60px; height:40px; float:center;">SAVE</a>
      <a href="#" id="edit" data-role="button">EDIT</a>
    </div>
  </div>
</body>

Voici mon code JavaScript:

 function getDataofSelectedListItem()
    {
        alert("getDataofSelectedListI");
        clickedListItem = window.localStorage.getItem("clickedValueofList");
        console.log("clicked list item"+clickedListItem);
        //db = window.openDatabase("loginintro", "1.0", "loginintro", 1000000);
        var sqlQuery = 'SELECT * FROM loginTable WHERE username=\''+window.localStorage.getItem("clickedValueofList").trim()+'\';';

        console.log("selected list query:"+sqlQuery);
        db.transaction(function(tx)
        {
          tx.executeSql(sqlQuery,[],successCBofListItem,errorCBofListItem);
        },errorCB,successCB);
    }
    function successCBofListItem(tx,results)
    {   alert("erer");
      if(results != null && results.rows != null && results.rows.length > 0) 
         {  $('#contentid').append('<label>UserName:</label><input content-editable="false" id="name" type="text"   value="'+results.rows.item(0).username+'"/>');
         $('#contentid').append('<label>EMAIL ID:</label><input type="text" value="'+results.rows.item(0).emailid+'"/>');
         $('#contentid').append('<label>Password:</label><input type="text" value="'+results.rows.item(0).password+'"/>');
    }   
    function errorCBofListItem()
    {
        alert("errorCBofListItem");
    }

Ce que je fais mal?

Votre JavaScript dans le <head> n'est pas enveloppé dans <script> balises. Était-ce une erreur lors de la copie du code sur un Débordement de Pile?
oui, c'était l'erreur lors de la copie de code?

OriginalL'auteur Erum | 2013-04-10

5

Vous devez utiliser live pour la capture de l'événement click
```
$('#edit').live('click',function()
```
J'ai créé un Exemple

Exemple pour dynamique zones de texte

Pourquoi cela devrait-il être nécessaire?
N'est pas nécessaire. et j'ai regardé que .() la méthode est disponible à partir de la version 1.7
r vous parler statique de la zone de texte de son travail pour la statique de la zone de texte, mais pas de réponse pour la dynamique de la zone de texte
C'est parce que le $(document).ready(function() est exécutée lorsque la page est chargée de sorte que votre appel pour désactiver la zone de texte n'ont aucun effet sur nouvellement créé des zones de texte. vous devez ajouter l'attribut disabled lors de la création de la dynamique des zones de texte selon dans quel mode vous vous trouvez modifier ou enregistré
Ajout d'un exemple de dynamique des zones de texte

OriginalL'auteur NullPointerException
2

Je crois à ce que vous recherchez est quelque chose comme ceci:
```
$('input').prop('readonly',true);
```
Il a été répondu à Ici

OriginalL'auteur Tony
0

Votre code pour désactiver la saisie de tous les champs est exécuté au DOMReady, qui est avant que votre successCBofListItem est exécuté, c'est à dire avant il y a des entrées pour le désactiver. Vous devez vous assurer qu'il est exécuté après.

De jQuery 1.6, utilisez .prop('disabled', true) plutôt que .attr('disabled', true). En outre, vous ne devez pas effectuer une itération sur la sélection et la désactivation de chaque entrée idividually, vous pouvez définir la propriété pour l'ensemble de la collection:
```
$('#contentid :input').prop('disabled', true)
```
Si ce que vous avez collé au-dessus de votre code est exactement comme il en existe un dans votre application, vous devez emballer votre javascript en tête dans <script>...</script> balises.

Une solution complète pourrait ressembler à quelque chose comme ceci:
```
function toggleForm(disabled) {
    $('#contentid :input').prop('disabled', disabled);
}

$(function() {
    $('#edit').on('click', function() { toggleForm(false); });
});
```
...
```
function successCBofListItem(tx,results)
{
     if(results != null && results.rows != null && results.rows.length > 0) 
     {
         $('#contentid').append('<label>UserName:</label><input content-editable="false" id="name" type="text"   value="'+results.rows.item(0).username+'"/>');
         $('#contentid').append('<label>EMAIL ID:</label><input type="text" value="'+results.rows.item(0).emailid+'"/>');
         $('#contentid').append('<label>Password:</label><input type="text" value="'+results.rows.item(0).password+'"/>');

         toggleForm(true);
     }
}   
```
Dans votre successCBofListItem ci-dessus vous semblent également manquer un }, j'ai corrigé ci-dessus. J'ai quitté le content-editable attribut dans votre code ci-dessus, dans le cas où vous êtes à l'utiliser pour quelque chose d'ailleurs dans le code, mais il n'est pas nécessaire pour cette fin. contenteditable est pour l'édition de contenu qui n'est pas un élément de formulaire.

oui, c'était l'erreur lors de la copie de code?
Bien sûr, je me doutais bien que beaucoup. Ignorer cette partie-là. Le reste de la réponse va encore.
attendre en essayant de le mettre en œuvre, de toute façon, mais permettez-moi de knmow où écrire cette ligne de crédit :la fonction toggleForm(désactivé) { $('#contentid :input').prop('disabled', personnes handicapées); }
il fonctionne parfaitement

OriginalL'auteur David Hedlund

Vous devez vous connecter pour publier un commentaire.