jquery replace each input with it's value. then switch/toggle back to having inputs

I have a table created by an AJAX request. Each of the TDs have a Textbox Input inside it. This allows the user to edit content. I want to have a "read only" mode where the user can't edit content (at the user's discretion). For this, I want the u开发者_如何学运维ser to be able to press a button (radio buttons would also be fine) that replaces each of the Textbox Inputs with a

tag containing the value of the text box as its text. Currently, my code replaces each of Inputs with the text "object Object". (Maybe I haven't converted the values to text strings correctly??) Any tips to let me know what's going wrong would be greatly appreaciated. Thanks!!

This is my current script:

<script type="text/javascript">
    $("#permissionsbutton").live('click',function(){
        sss = $('.cells').each(function(){$(this).val()});
        $(".cells").replaceWith("<p class='readonlycells' type='text'>" + sss + "</p>");
    });
    // if this worked, I would write another few lines
    // to be able to switch back to having inputs
</script>

And this is a snippet of what the HTML could look like:

<div id="readwrite" class="settings">
    <h3>Permissions</h3>
    <button id="permissionsbutton">Switch to Read Only Mode</button>
</div>
<table><tr>
    <td><input class='cells' type=text value='Steve'></td>
    <td><input class='cells' type=text value='Mary'></td>
    <td><input class='cells' type=text value='Big Bird'></td>
</tr></table>

jQuery's each function returns the jQuery object it was called on ($('cells') in your case). So your current code is replacing each element matched by the .cells selector with the jQuery object, which is serializing to "object Object".

What you want is something more like

$("#permissionsbutton").live('click', function() {
    $(".cells").each(function() {
        $(this).replaceWith($(this).val());
    }
});

$("#permissionsbutton").live('click',function(){ 
  $('.cells').each(function(){
    var cell=$(this);
    cell.replaceWith('<span class="cells_ro">'+cell.val()+'</span>');
  }); 
});

Or just disable cells:

$("#permissionsbutton").live('click',function(){ 
  $('.cells').attr('disabled',true);
});

How about:

$("#permissionsbutton").click(function(){
$('.cells').attr('disabled','disabled');
});

Try it here