动态表在选中FORM文本字段中的显示值以进行编辑时，单击带有相关行的复选框

Question

Kindly assist. All I want to do is use to checkbox so when 'checked' it shows the data in the fields so a user can edit.

This is my JavaScript

<script type="text/javascript">
$(document).ready(function(){
    $(".add-row").click(function(){
        var OS = $("#OS").val();
        var vCPU = $("#vCPU").val();
        var Memory = $("#Memory").val();
        var Val = $("#Val").val();
        var Performance = $("#Performance").val();
        var HighWrite = $("#HighWrite").val();
        var markup 
        = "<tr><td><input class='checkEdit' type='checkbox' name='record'></td><td>" + OS + "</td><td>" + vCPU + "</td><td>" + Memory + "</td><td>" + Val + "</td><td>" + Performance + "</td><td>" + HighWrite + "</td></tr>";

        $("table tbody").append(markup);
    });

    // Find and remove selected table rows
    $(".delete-row").click(function(){
        $("table tbody").find('input[name="record"]').each(function(){
            if($(this).is(":checked")){
                $(this).parents("tr").remove();
            }
        });
    });

});    

that builds the dynamic table when i fill out the form fields and click the button 'Add' in the image.

Table preview

Answer 1

Need add click event in checkbox onclick='handleClick(this);' make all data input.

in handleClick function need toggle input disable base on the checkbox is checked or not.

 $(document).ready(function(){ $(".add-row").click(function(){ var OS = $("#OS").val(); var vCPU = $("#vCPU").val(); var Memory = $("#Memory").val(); var Val = $("#Val").val(); var Performance = $("#Performance").val(); var HighWrite = $("#HighWrite").val(); vCPU =10; var markup = "<tr><td><input class='checkEdit' type='checkbox' name='record' onclick='handleClick(this);'></td><td>" + "<input type='text' class='enable' name='vCPU' value="+vCPU+" readonly>" + "</td></tr>"; $("table tbody").append(markup); }); // Find and remove selected table rows $(".delete-row").click(function(){ $("table tbody").find('input[name="record"]').each(function(){ if($(this).is(":checked")){ $(this).parents("tr").remove(); } }); }); }); function handleClick(cb) { if(cb.checked){ $(cb).parent().parent().find(".enable").each(function(){ console.log($(this)); $(this).prop('readonly', false); }); } else{ $(cb).parent().parent().find(".enable").each(function(){ console.log($(this)); $(this).prop('readonly', true); }); } } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table> <tbody></tbody> </table> <button class="add-row">add</button>