Включить атрибут readonly в поле ввода

Question

Я создал форму. Вот fiddle

По умолчанию все поля находятся в состоянии readonly. Что мне нужно сделать здесь

1. Активное текстовое поле для редактирования при использовании нажмите на кнопку Edit button и редактирования (Name и значение) должно превратиться в SAVE button.

2. После редактирования выполняется пользователь должен нажать на Save button и он должен сделать первый шаг снова, значит изменить кнопку обратно в исходное состояние т.е. Edit и текстовых полей readonly

предпочтительно ищет jquery.

Благодарим заранее!

Answer 1

Получает все элементы с именем Edit и прикрепляет обработчик кликов. Переменная prev - это предыдущий элемент ввода, а ro - это состояние атрибута readonly (true/false).

Затем мы устанавливаем только для чтения состояния в ! ro (не ро), который просто означает «установить его на противоположное тому, что он в настоящее время (функцию переключения, если вы будете)», и фокусированием prev входа.

Последняя строка нацелена на нажатие текущей кнопки с this и изменяет ее текст с помощью тернарного оператора, основанного на состоянии переменной 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

В простейшем:

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

И обеспечить для изменения текста 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.