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不仅仅是行中的那个工作

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

您应该使用$("#"+idSel).closest("td.especial")代替$("td.especial")来查找匹配td.especial选择器的第一个祖先。

您当前的代码只是匹配给定选择器`td.especial。

的DOM匹配中存在的所有内容

Answer 2

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

更改td更改所有列

2 个答案: