Chuyển đổi thuộc tính chỉ đọc trong trường nhập

Question

Tôi đã tạo biểu mẫu. Dưới đây là fiddle

Theo mặc định, tất cả các trường đều ở trạng thái chỉ đọc. Những gì tôi cần phải làm ở đây là

1. kích hoạt trường văn bản để chỉnh sửa khi sử dụng nhấp chuột vào nút Edit button và chỉnh sửa (Tên và giá trị) nên biến thành SAVE button.

2. Khi chỉnh sửa được thực hiện sử dụng nên click vào Save button và nó nên làm bước đầu tiên một lần nữa, có nghĩa là thay đổi nút quay lại để tình trạng ban đầu tức là Edit và văn bản lĩnh vực để readonly

tốt nhất tìm kiếm giải pháp jquery.

Cảm ơn trước !!

Answer 1

Lấy tất cả các thành phần có tên Edit và đính kèm trình xử lý nhấp chuột. Biến số prev là phần tử đầu vào trước đó và ro là các phần tử thuộc tính chỉ đọc thuộc tính (true/false).

Sau đó, chúng tôi đang đặt trạng thái chỉ đọc thành ! ro (không ro), điều này có nghĩa là "đặt nó ngược lại với nội dung hiện tại (chức năng chuyển đổi nếu bạn muốn)" và tập trung vào đầu vào prev.

Dòng cuối cùng nhắm mục tiêu nút hiện được nhấp với this và thay đổi văn bản của nó bằng toán tử bậc ba dựa trên trạng thái của biến số 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

Tại đơn giản nhất:

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

Và để cung cấp cho việc thay đổi nội dung của 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.