Attiva/disattiva attributo readonly nel campo di immissione

Question

Ho creato un modulo. Ecco lo fiddle

Per impostazione predefinita tutti i campi sono in stato di sola lettura. Che cosa devo fare qui è

1. attivo il campo di testo per modificare quando l'uso Fare clic sul pulsante Edit button e modificare (nome e valore) dovrebbe trasformarsi in SAVE button.

2. Una volta che la modifica è fatta utente deve cliccare sul Save button e dovrebbe fare il primo passo di nuovo, significa cambiare il pulsante torna allo stato originale cioè Edit testo e campi per readonly

preferibilmente in cerca di soluzione jquery.

Grazie in anticipo !!

Answer 1

Ottiene tutti gli elementi con il nome Edit e allega un gestore di clic. La variabile prev è l'elemento di input precedente e ro è che gli elementi in sola lettura attribuiscono lo stato (vero/falso).

Poi stiamo impostando lo stato di sola lettura per ! ro (non ro), che significa semplicemente "impostato al contrario di ciò che attualmente è (a levetta funzioni se si vuole)", e concentrandosi l'ingresso prev.

L'ultima riga si riferisce al pulsante attualmente selezionato con this e modifica il testo con un operatore ternario in base allo stato della variabile ro.

$('[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

Nel caso più semplice:

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

e per fornire per cambiare il testo del 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 demo.