Avoid repeating the same functions JS / JQuery

Question

Avoid repeating the same functions JS / JQuery

Navigation

#1 by (5 votes)

-1

How can I prevent the JS function from being repeated once per line? I mean, now there are three functions, but if there were 100 lines in the form I would like to have a single function for all and one line per line.

$( function() {
  $("#id_categoria_1").change( function() {
      if ($(this).val() === "1") {
          $("#id_input_1").prop("disabled", true);
      } else {
          $("#id_input_1").prop("disabled", false);
      }
  });
});      

$( function() {
  $("#id_categoria_2").change( function() {
      if ($(this).val() === "1") {
          $("#id_input_2").prop("disabled", true);
      } else {
          $("#id_input_2").prop("disabled", false);
      }
  });
});     

$( function() {
  $("#id_categoria_3").change( function() {
      if ($(this).val() === "1") {
          $("#id_input_3").prop("disabled", true);
      } else {
          $("#id_input_3").prop("disabled", false);
      }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
                            
<form method="post" action="#"> 
    <div style="margin-top:20px;">Fila 1</div>
    <div>
        <select name='id_categoria_1' id='id_categoria_1'>
            <option value="1" selected>Desactivado</option>
            <option value="2">Activado</option>
        </select>
        <input id="id_input_1" type="text" disabled>
    </div>

    <div style="margin-top:20px;">Fila 2</div>
    <div>
        <select name='id_categoria_2' id='id_categoria_2'>
            <option value="1" selected>Desactivado</option>
            <option value="2">Activado</option>
        </select>
        <input id="id_input_2" type="text" disabled>
    </div>
    <div style="margin-top:20px;">Fila 3</div>
    <div>
        <select name='id_categoria_3' id='id_categoria_3'>
            <option value="1" selected>Desactivado</option>
            <option value="3">Activado</option>
        </select>
        <input id="id_input_3" type="text" disabled>
    </div>
</form>

javascript jquery

asked by Paco S 05.12.2017 в 22:45

source

1 answer

Know which buttons were pressed [closed] cstdio vs fstream [closed]

score 5 · Accepted Answer

You can summarize everything to a single dynamic function which will detect to which select the change was applied to it and what is the element input brother of that select , to enable / disable it according to the case:

$( function() {
  $(".categoria").change(function(){
    if ($(this).val() === "1") {
      $(this).siblings('input').prop("disabled", true);
    }else{
      $(this).siblings('input').prop("disabled", false);
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
                            
<form method="post" action="#"> 
    <div style="margin-top:20px;">Fila 1</div>
    <div>
        <select name='id_categoria_1' id='id_categoria_1' class="categoria">
            <option value="1" selected>Desactivado</option>
            <option value="2">Activado</option>
        </select>
        <input id="id_input_1" type="text" disabled>
    </div>

    <div style="margin-top:20px;">Fila 2</div>
    <div>
        <select name='id_categoria_2' id='id_categoria_2' class="categoria">
            <option value="1" selected>Desactivado</option>
            <option value="2">Activado</option>
        </select>
        <input id="id_input_2" type="text" disabled>
    </div>
    <div style="margin-top:20px;">Fila 3</div>
    <div>
        <select name='id_categoria_3' id='id_categoria_3' class="categoria">
            <option value="1" selected>Desactivado</option>
            <option value="3">Activado</option>
        </select>
        <input id="id_input_3" type="text" disabled>
    </div>
</form>