Jquery を使用してテーブル内の複数の選択ボックスにアクセスして検証する

デイブ・ウォーカー

テーブルに 2 つの列があり、各列に [選択] ドロップダウンがあります。2 番目のドロップダウンは、最初の値に応じて有効または無効になります。

これは最初の行で機能しますが、複数の行を追加すると (実際にはプログラム内で動的に行われます)、「id」が同じになり、有効化と無効化の検証が機能しません-同じ名前が原因であると思われます。

これを複数の行で機能させるにはどうすればよいでしょうか?

これまでのところの例 - https://jsfiddle.net/dave_pace/L8naac5u/

<table id="example" >
  <tr>
    <th>Site</th>
    <th>Location</th>
  </tr>

  <tr>
    <td>
      <select name="site" id="site">
        <option value="Local" selected="">Local</option>
        <option value="Remote">Remote</option>
      </select>
    </td>
    <td>
      <select name="remotesite" id="remotesite" disabled>
        <option value="&quot;"></option>
        <option value="Acme Ltd 0001">Acme Ltd 0001</option>
        <option value="Acme Ltd 0002">Acme Ltd 0002</option>
        <option value="Acme Ltd 0003">Acme Ltd 0003</option>
      </select>
    </td>
  </tr>
  <tr>
    <td>
      <select name="site" id="site">
        <option value="Local" selected="">Local</option>
        <option value="Remote">Remote</option>
      </select>
    </td>

    <td>
      <select name="remotesite" id="remotesite" disabled>
        <option value="&quot;"></option>
        <option value="Acme Ltd 0001">Acme Ltd 0001</option>
        <option value="Acme Ltd 0002">Acme Ltd 0002</option>
        <option value="Acme Ltd 0003">Acme Ltd 0003</option>
      </select>
    </td>
  </tr>
  <tr>
    <td>
      <select name="site" id="site">
        <option value="Local" selected="">Local</option>
        <option value="Remote">Remote</option>
      </select>
    </td>

    <td>
      <select name="remotesite" id="remotesite" disabled>
        <option value="&quot;"></option>
        <option value="Acme Ltd 0001">Acme Ltd 0001</option>
        <option value="Acme Ltd 0002">Acme Ltd 0002</option>
        <option value="Acme Ltd 0003">Acme Ltd 0003</option>
      </select>
    </td>
  </tr>

</table>

$(document).ready(function(){
    function updateTable() {

      // alert('hi');

      // alert($(this).val());

      // alert($(this).text());

      if ($(this).val() == "Remote") {
        document.getElementById('remotesite').disabled=false;
      }
      else {
        document.getElementById('remotesite').disabled=true;
      }

    }

    $("#site").change(updateTable);

});

有能な

警告:クラスを使用できるため、同じ値で複数の ID を宣言しないでください。同じ値を持つ複数のクラスとは異なり、ID は一意である必要があります。

解決策:選択したタグから ID を削除し、このスクリプトタグを自分のものに置き換えます。

<script type="text/javascript">
$("select[name='site']").change(function(){
    var _this = $(this);
    _this.parent().siblings().children("select[name='remotesite']").attr('disabled', false)
});
</script>

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]