How do I change a data table line when selecting it?

Question

In this code I can select it and in the console.log have access to the information, but I don’t know how I could change it:

    $(document).ready(function () {
    var oTable = $('#tableproduct').DataTable();

    $('#tableproduct tbody').on('click', 'tr', function () {
        $(this).toggleClass('selected');
        var pos = oTable.row(this).index();
        var row = oTable.row(pos).data();
        console.log(row);
    })
});

I need to change the readonly property from true to false input when selecting the line.

Answer 1

I don’t know the structure of your chart, but it must be something like this you’re looking for:

$(document).ready(function () {
    var oTable = $('#tableproduct');

    $('#tableproduct tbody').on('click', 'tr', function () {
        $(this).toggleClass('selected');
        
        let inputs = this.getElementsByTagName('input');

        for (let input of inputs) {
          input.readOnly = false;
        } 
       
        console.log(this);
        
    })
});

.selected{
  background-color: #c0c0c0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tableproduct" class="table">
	<thead>
		<tr>
			<th>Código</th>
            <th>Cor</th>
            <th>Tamanho</th>
			<th>Quantidade</th>
            <th style="width:25%">% do estoque total</th>
			<th>Ação</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>100</td>
			<td>Azul</td>
		    <td>M</td>
		    <td><input type="text"></td>
			<td></td>
			<td><span style="cursor: pointer;" class="label label-success">Lançam .manual</span></td>
		</tr>
										
	</tbody>
</table>