更改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>

这是我要求禁用下一个输入的函数，基本上我要获得ID以及值，并取决于我禁用输入，但显然我禁用或启用所有TD，而不仅仅是行中的所有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不起作用。..

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.epecial。