Toggle readonly Attribut im Eingabefeld

Question

Ich habe ein Formular erstellt. Hier ist die fiddle

Standardmäßig sind alle Felder im schreibgeschützten Zustand. Was ich hier tun müssen, ist

1. Aktive das Textfeld zu bearbeiten, wenn die Verwendung klicken Sie auf den Edit button und bearbeiten Taste (Name und Wert) in SAVE button drehen sollte.

2. Sobald die Bearbeitung Benutzer sollte auf dem Save button erfolgt klicken und es sollte wieder den ersten Schritt zu tun, bedeutet, die Taste wieder in den ursprünglichen Zustand ändern, dh Edit und Textfelder zu readonly

vorzugsweise suchen jQuery Lösung.

Vielen Dank im Voraus!

Answer 1

Ruft alle Elemente mit dem Namen Edit ab und hängt einen Klick-Handler an. Die Variable prev ist das vorherige Eingabeelement und ro ist das Element readonly Attributstatus (true/false).

Dann setzen wir den Readonly-Zustand auf ! ro (nicht ro), was nur bedeutet "setze es auf das Gegenteil von dem, was es gerade ist (eine Toggle-Funktion, wenn du willst)", und fokussiere den prev Eingang.

Die letzte Zeile zielt auf die aktuell angeklickte Schaltfläche mit this und ändert ihren Text mit einem ternären Operator basierend auf dem Status der 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'); 
}); 

FIDDLE

Answer 2

Am einfachsten:

// 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 demo.

Und zum Ändern des Textes der button zu bieten:

$('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 demo.