Enable/Disable input text with via loop

Question

The intention is, to put all text inputs of the variable VesaoNova Disable whenever text input VersaoAntiga is empty. The problem is in jquery in the conditions,?

<?php
while($row = mysqli_fetch_array($result)) 
{

          echo "<tbody data-link='row' class='rowlink'>";
            echo "<tr>";
            echo "<td>" . $row['Opcao'] . "</td>";
            echo "<td>  <input type='text' name='VersaoAntiga' id= 'VersaoAntiga-".$row['IDOpcao']."' class='form-control'></td>";
            echo "<td>  <input type='text' id='VersaoNova-".$row['IDOpcao']."' name='VersaoNova' class='form-control'></td>";
            echo "<td  style='text-align:center;'><input type='checkbox' name= 'VerificacaoPrevia'></td>";
            echo "<td  style='text-align:center;'>  <input type='checkbox' name='VerificacaoNova'></td>";
            echo "</tr>";
            echo "</tbody>";    

            }

            echo "</table>";
            mysqli_close($conn);
?>

    <script>
    $(document).ready(function(e){
    var id = e.target.id.split("-");
    $('#VersaoNova-'+id[1]).prop('disabled',true);
    if (id[0]=="VersaoAntiga") {
    $('#VersaoAntiga-'+id[1]).keyup(function(){
    $('#VersaoNova-'+id[1]).prop('disabled', this.value == "" ? true : false);     
    })
    }
    }); 
    </script>

Answer 1

You need to assign a unique identifier to the elements VersaoAntiga, which is what you will validate if it is empty to be able to disable the other elements.

To do this, add an attribute class inputs and control over the ID. I put the event input trailer.. and only disable the field according to the ID of the VersaoAntiga, which was more or less what you put in the question.

$(".versao_antiga").on('input', function(e) {
    var elemento = $(this);
    var idElemento = elemento.attr("id").split('-')[1];

    $("#versaonova-" + idElemento).prop('disabled', elemento.val().length == 0);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<input type="text" id="versaoantiga-1" class="versao_antiga" value="" />
<input type="text" id="versaoantiga-2" class="versao_antiga" value="" />

<input type="text" id="versaonova-1" value="teste" />
<input type="text" id="versaonova-2" value="teste2" />

EDIT:

For your specific example, just edit your loop by adding the class mentioned:

<?php
while($row = mysqli_fetch_array($result)) 
{

          echo "<tbody data-link='row' class='rowlink'>";
            echo "<tr>";
            echo "<td>" . $row['Opcao'] . "</td>";
            echo "<td>  <input type='text' name='VersaoAntiga' id= 'VersaoAntiga-".$row['IDOpcao']."' class='form-control versao_antiga'></td>"; #Adicionado 'versao_antiga' à class
            echo "<td>  <input type='text' id='VersaoNova-".$row['IDOpcao']."' name='VersaoNova' class='form-control'></td>";
            echo "<td  style='text-align:center;'><input type='checkbox' name= 'VerificacaoPrevia'></td>";
            echo "<td  style='text-align:center;'>  <input type='checkbox' name='VerificacaoNova'></td>";
            echo "</tr>";
            echo "</tbody>";    

            }

            echo "</table>";
            mysqli_close($conn);
?>

And in your JS:

$(document).ready(function(e){
    $(".versao_antiga").on('input', function(e) {
        var elemento = $(this);
        var idElemento = elemento.attr("id").split('-')[1];

        $("#VersaoNova-" + idElemento).prop('disabled', elemento.val().length == 0);
    });
});