change a td change all the column

Question

I have to disable a input in a

td

, based in the selection in the

td

select, the

td

target is the next one, but when I select a option it changes all the next

td

in the column. I´m new in this u_u

<table id="tabla">

<!-- Cabecera de la tabla -->

   thead>

     <tr>

    <th>Nombre</th>

    <th>Apellidos</th>

    <th>Sexo</th>

    <th>&nbsp;</th>

  </tr>

</thead>

  <tbody>

    <tr>

      <td class="especial">

        <select id="mySelect" onchange="funcSelect()" name="inmueble_psesion" class="browser-default">

                <option value="1">PROPIO</option>

                <option value="2">RENTADO</option>

                <option value="3">COMODATO</option>

                <option value="4">*OTRO</option>

        </select>

      </td>

      <td><input type="text" name="" disabled></td>

      <td><input type="text" name="" value="3" ></td>

      <td></td>

    </tr>

    <tr>

      <td class="especial">

        <select id="mySelect2" onchange="funcSelect()" 

        name="inmueble_psesion" class="browser-default">

                <option value="1">PROPIO</option>

                <option value="2">RENTADO</option>

                <option value="3">COMODATO</option>

                <option value="4">*OTRO</option>

        </select>

      </td>

      <td><input type="text" name="" disabled></td>

      <td><input type="text" name="" value=""></td>

      <td><input type="text" name="" value=""></td>

    </tr>

  </tbody>

</table>

this is the function I call for disable the next input, basically i am obtaining the id and the value and depending on that I disable the input, but apparently I disable or enable all the td's not just the one in the row I work

function funcSelect(){

  var idSel = $("select").attr("id");

  console.log(idSel);

  var valSel = $("#"+idSel).val();

  var id = "#"+idSel;

  console.log(id);

  console.log(valSel);

  if(valSel === "4"){

    $("td.especial").next("td").children().removeAttr("disabled");

  }else{

    $("td.especial").next("td").children().attr("disabled", "disabled");

  }

}

Recommended for you: Get network issues from WhatsUp Gold. Not end users.

Answer 1

Javascript doesn't work this way.Here is a working version of you code..... Plus you don't have to use any inline function to get this work.....

HTML: 

 <table id="tabla">
  <!-- Cabecera de la tabla -->
       <thead>
    <tr>
    <th>Nombre</th>
    <th>Apellidos</th>
    <th>Sexo</th>
    <th>&nbsp;</th>
 </tr>
 </thead>
<tbody>
<tr>
  <td class="especial">
    <select id="mySelect" name="inmueble_psesion" class="browser-default">
            <option value="1">PROPIO</option>
            <option value="2">RENTADO</option>
            <option value="3">COMODATO</option>
            <option value="4">*OTRO</option>
    </select>
  </td>
  <td><input type="text" name="" disabled></td>
  <td><input type="text" name="" value="3" ></td>
  <td></td>
</tr>
<tr>
  <td class="especial">
    <select id="mySelect2"
    name="inmueble_psesion" class="browser-default">
            <option value="1">PROPIO</option>
            <option value="2">RENTADO</option>
            <option value="3">COMODATO</option>
            <option value="4">*OTRO</option>
    </select>
  </td>
  <td><input type="text" name="" disabled></td>
  <td><input type="text" name="" value=""></td>
  <td><input type="text" name="" value=""></td>
</tr>
 </tbody>
</table>

Javascript/Jquery:

 $(document).on('change', 'select', function(event) {
    var val = $(this).val();
    if (val == 4) {
        $(this).parent().next('td').children().removeAttr('disabled');
    }else{
        $(this).parent().next('td').children().attr('disabled', 'disabled');
    }
});

change a td change all the column

Sign up