Bascule attribut lecture seule dans le champ de saisie

J'ai créé un formulaire. Voici la violon

Par défaut, tous les champs sont en lecture seule de l'état. Ce que je dois faire ici est

  1. Active le champ de texte pour le modifier lors de l'utilisation, cliquez sur le Edit button et bouton modifier (Nom et valeur) doit se transformer en SAVE button.

  2. Une fois l'édition se fait l'utilisateur doit cliquer sur le Save button et il doit faire la première étape, les moyens de changer le bouton de retour à l'état initial, j'.e Edit et les champs de texte à readonly

de préférence à la recherche pour jquery solution.

Merci d'avance!!

InformationsquelleAutor Sowmya | 2013-03-26
  1. 7

    Obtient tous les éléments avec le nom Edit et attache un gestionnaire de clic.
    La variable prev est la précédente, l'élément d'entrée et ro est que les éléments en lecture seule attribut de l'état (vrai /faux).

    Ensuite, nous sommes de réglage de la readonly état de ! ro (pas ro), qui signifie "placer à l'opposé de ce qu'elle est (une fonction de bascule, si vous voulez)", et en concentrant le prev d'entrée.

    La dernière ligne des objectifs de la actuellement cliqué bouton avec this, et ça change du texte avec un opérateur ternaire en fonction de l'état de la ro variable.

    $('[name="Edit"]').on('click', function() {
    var prev = $(this).prev('input'),
        ro   = prev.prop('readonly');
    prev.prop('readonly', !ro).focus();
    $(this).val(ro ? 'Save' : 'Edit');
});

    VIOLON

    • Pourriez-vous nous l'expliquer
    • Bien sûr, l'explication ajoutée!
    • je vous remercie. Encore une chose, j'ai besoin d'afficher un message d'alerte disant "Sauvé", à côté du bouton, quand je suis fait avec l'édition (cliqué sur le bouton Enregistrer). S'il vous plaît pouvez-vous regarder cela.
    • quelque chose comme ceci VIOLON ??
    • Exactement 🙂 Merci beaucoup.
    InformationsquelleAutor adeneo
  2. 4

    À sa plus simple:

    //binds a click-handler to inputs whose `name` attribute is equal to 'Edit':
$('input[name="Edit"]').click(function(){
    //when the input is clicked, it looks to the previous input element
    //that has a `required` attribute, and sets its `readonly` property,
    //the `r` is the current readonly state (true or false)
    $(this).prev('input[required]').prop('readonly',function(i,r){
        //returns the value as the opposite  of what it currently is
        //if readonly is false, then it returns true (and vice-versa)
        return !r;
    });
});

    JS Fiddle démo.

    Et à fournir pour changer le texte de la button:

    $('input[name="Edit"]').click(function(){
    $(this)
    .val(function(i,v){
        return v === 'Edit' ? 'Finished' : 'Edit';
    })
    .prev('input[required]')
    .prop('readonly',function(i,r){
        return !r;
    });
});

    JS Fiddle démo.

    • Pourriez-vous nous l'expliquer, ce qui signifie par !r et v
    InformationsquelleAutor David Thomas