Omar Omar - 3 years ago 128
HTML Question

change a td change all the column

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");
}
}

Answer Source

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');
    }
});
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download