Enable / Disable input text with looping

Question

Enable / Disable input text with looping

Navigation

#1 by (1 votes)

1

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

<?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>

php jquery

asked by anonymous 21.10.2016 / 12:14

1 answer

How to do a Google search with C #? Carrot does not show photo

score 1 · Answer 1

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

To do this, add a class attribute to the inputs and make the control over the ID. I put the event input trailer .. and only disable the field according to the ID of 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><inputtype="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);
    });
});