Przełącz atrybut tylko do odczytu w polu wejściowym

Question

Utworzono formularz. Oto domyślnie wszystkie pola są w trybie tylko do odczytu. Domyślnie wszystkie pola są w stanie tylko do odczytu. Co muszę zrobić tutaj jest

1. Aktywne pole tekstowe do edycji, gdy użycie kliknięcie na przycisk Edit button i edycji (nazwa i wartość) należy skręcić w SAVE button.

2. Po edycja odbywa się użytkownik powinien kliknąć na Save button i należy go ponownie zrobić pierwszy krok, to znaczy zmienić przycisk z powrotem do pierwotnego stanu tj Edit i pola tekstowe do readonly

najlepiej szuka rozwiązanie jquery.

Z góry dziękuję !!

Answer 1

Pobiera wszystkie elementy o nazwie Edit i dołącza moduł obsługi kliknięcia. Zmienna prev to poprzedni element wejściowy, a ro to stan atrybutów readonly elementów (true/false).

Następnie ustawiamy stan readonly ! ro (nie ro), co oznacza po prostu „ustawić go przeciwieństwem tego, co obecnie jest funkcją przełączania (jeśli będzie)”, a koncentrując się na wejście prev.

Ostatnia linia dotyczy aktualnie klikniętego przycisku z numerem this i zmienia tekst za pomocą operatora trójskładnikowego na podstawie stanu zmiennej 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

W najprostszej:

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

oraz zapewnienie zmieniając tekst 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.