改變TD變化的所有列

Question

我有一個td禁用輸入，基於在td選擇的選擇，td目標是下一個，但是當我選擇一個選項，它改變了這一切，在未來td該列。在此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> 

I'm新的，這是我要求的功能禁用下一個輸入，基本上我獲得的ID和價值，取決於我禁止輸入，但顯然我禁用或啓用所有的TD不只是一個排在我工作

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不工作，這way.Here是一個工作版本的代碼，你.....另外，您不必使用任何內聯函數來得到這個工作.....

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

您應該使用$("#"+idSel).closest("td.especial")而不是$("td.especial")找到剛纔始祖匹配td.especial選擇。

您當前的代碼只是匹配DOM匹配給定選擇器`td.especial中的所有內容。