changer un td changer toute la colonne

Question

Je dois désactiver une entrée dans un td, en fonction de la sélection dans la sélection td, la cible td est la suivante, mais quand je sélectionne une option, elle change tous les td en la colonne. Je suis nouveau dans ce 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> 

c'est la fonction que j'appelle pour désactiver l'entrée suivante, je suis essentiellement téléchargerai les id et la valeur et en fonction de ce que je désactive l'entrée, mais apparemment je désactiver ou activer tout le td n'est pas seulement celui de la ligne que je travaille

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 1

Javascript ne fonctionne pas way.Here est une version de travail vous code ..... Plus vous ne devez pas utiliser une fonction en ligne pour obtenir ce travail .....

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

Answer 2

Vous devez utiliser $("#"+idSel).closest("td.especial") au lieu de $("td.especial") de trouver le premier ancêtre correspondant à td.especial sélecteur.

Votre code actuel correspond à tout ce qui existe dans le sélecteur DOM 'td.especial'.