Как переключить текстовое поле для <label>, <div> или <span> с помощью jQuery?

Я пытаюсь использовать «единый источник» для страницы формы, которая может находиться в режиме редактирования или просмотра. По разным причинам здесь не используются элементы управления ASP.Net FormView или DetailsView.

Поскольку нет способа отключить текстовое поле, не сделав его содержимое серым (ну, мы могли бы «съесть» все нажатия клавиш в него, но это тоже не очень элегантно), а отключение раскрывающегося списка или списка - это не то, что мы хотите, наша первая попытка состояла в том, чтобы продублировать все элементы управления вводом формы с меткой и использовать CSS, чтобы выбрать, какие из них видны в зависимости от режима формы. Это работает, но некрасиво редактировать, и код программной части должен каждый раз заполнять оба элемента управления.

Мы могли бы контролировать видимость в коде программной части, чтобы избежать заполнения обоих элементов управления, но нам все равно нужно добавить их оба в форму.

Поэтому у меня возникла идея использовать jQuery для замены элементов управления вводом на элементы <label>, <div> или <span>. В некоторой степени это работает путем создания соответствующих селекторов и использования метода jQuery replace() для динамической замены элементов.

Проблема в том, что мне нужно не только скопировать содержимое, но и стили, атрибуты и размеры исходных элементов управления вводом (на данный момент мы говорим только о текстовых полях - у нас есть другое решение для раскрывающихся списков и списков). .

Грубая сила должна работать - «сделайте резервную копию» всех атрибутов элемента управления вводом, создайте новый элемент «только для чтения», затем замените элемент управления вводом новым элементом. Я ищу что-нибудь попроще.

Вкратце, используя jQuery, как лучше всего заменить текстовое поле меткой, чтобы метка имела то же содержимое и отображалась в том же месте и стиле, что и текстовое поле?

Вот что у меня есть на данный момент:

$(":text").each( function() {
    var oldClass = $(this).attr("class");
    var oldId = $(this).attr("id");
    var oldHeight = $(this).outerHeight();
    var oldWidth = $(this).outerWidth();
    var oldStyle = $(this).attr("style");
    $(this).replaceWith("<div id='" + oldId + "'>" + $(this).val() + "</div>");
    $("div#" + oldId).attr("class", oldClass);
    $("div#" + oldId).attr("style", oldStyle);
    $("div#" + oldId).width(oldWidth);
    $("div#" + oldId).height(oldHeight);
    $("div#" + oldId).css("display", "inline-block");
});