在页面加载时应用属性

Question

我有这个工作代码，它根据下拉框中的选择来更新属性。我有它，所以输入字段和下拉保存，但当前属性没有。因此，当我刷新页面时，所有数据仍然保留，但输入字段不再设置为禁用。最好的方法是什么？

$(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/3.3.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>