javascript - 根据我在同一行中选择的选项禁用输入，所有行都相同

Question

我有一个表，其行是从原始行复制而来的，因此所有 ID 都相同。如何禁用与我在同一行中选择的选项相关的输入。

例如，如果在第二行中我选择选项 10，它会禁用同一行中的第二个输入。

<table>
    <tbody>
        <tr>

            <td><select id="my_option">                     
                <option>10</option>
                <option>20</option>                    
            </select></td>
            <td id="1"><input type="text"></td>
            <td id="2"><input type="text"></td> 
        </tr>
        <tr>
            <td><select id="my_option">                     
                <option>10</option>
                <option>20</option>                    
            </select></td>
            <td id="1"><input type="text"></td>
            <td id="2"><input type="text"></td> 
        </tr>
        <tr>
            <td><select id="my_option">                     
                <option>10</option>
                <option>20</option>                    
            </select></td>
            <td id="1"><input type="text"></td>
            <td id="2"><input type="text"></td>  
        </tr>
    </tbody>
</table>

<script>
$(document).ready(function() 
{
    function change_attribute(version_val) 
    {
    var version_val = $("#my_option").val();

    var table = $(table);     
    //this part is just a test to select a specific cell   
    var cell = table.rows[1].cells[1];

    if (version_val == "10") {  

        $(cell).attr("disabled", true);

    } else if (version_val == "20") {            

        $(cell).attr("disabled", false);
    }
}
</script>

Answer 1

您需要在 td 中插入 select，并且您需要通过通用类更改重复的 id，而不是一个有效的 HTML 结构:

$(document).ready(function() {
  $('.my_option').on('change', change_attribute);
});

function change_attribute() {
  var version_val = $(this).val();
  var parent_row = $(this).closest('tr');


  if (version_val == 10) {
    parent_row.find('.1').find('input').attr("disabled", "disabled");
    parent_row.find('.2').find('input').removeAttr("disabled");

  } else if (version_val == 20) {
    parent_row.find('.2').find('input').attr("disabled", "disabled");
    parent_row.find('.1').find('input').removeAttr("disabled");
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr>
      <td>
        <select class="my_option">
          <option>10</option>
          <option>20</option>
        </select>
      </td>
      <td class="1"><input type="text"></td>
      <td class="2"><input type="text"></td>
    </tr>
    <tr>
      <td>
        <select class="my_option">
          <option>10</option>
          <option>20</option>
        </select>
      </td>
      <td class="1"><input type="text"></td>
      <td class="2"><input type="text"></td>
    </tr>
    <tr>
      <td>
        <select class="my_option">
          <option>10</option>
          <option>20</option>
        </select>
      </td>
      <td class="1"><input type="text"></td>
      <td class="2"><input type="text"></td>
    </tr>
  </tbody>
</table>