値が0になる前にselectを選択したときにテキストボックスを無効にする方法

私はこのテーブルを持っており、0の値を持つすべての選択に対して、選択に続くテキストボックスを無効にする必要があります。ここにテーブルがあります。値が0になる前にselectを選択したときにテキストボックスを無効にする方法

<tbody> 
    <tr id="MainContent_Row_310" style="background-color:LightGrey;"> 
     <td align="left" colspan="4"><span id="MainContent_lblItem_310" style="color:DimGray;font-weight:bold;">Framing Materials</span></td><td align="center"><span id="lblLeadTime_310">7</span></td> 
    </tr><tr id="MainContent_Row_311"> 
     <td align="left"><span></span></td><td><span id="MainContent_lblItem_311" style="color:Brown;font-weight:normal;">Species</span></td><td align="left"><select name="ctl00$MainContent$ddlSelection_311" id="ddlSelection_311" style="width:98%;"> 
      <option value="0">--Select One--</option> 
      <option selected="selected" value="213">SPF</option> 
      <option value="214">DF</option> 
      <option value="215">FRT</option> 
      <option value="217">FSC</option> 
      <option value="218">SYP</option> 
      <option value="219">LSL</option> 
      <option value="216">Versa Stud</option> 
      <option value="231">Plans &amp; Specs</option> 
      <option value="232">Other</option> 

     </select></td><td align="center"><input name="ctl00$MainContent$txtDesc_311" type="text" maxlength="250" id="txtDesc_311" style="color:Brown;width:100%;" /></td><td align="center"><span id="lblLeadTime_311" style="color:White;">7</span></td> 
    </tr><tr id="MainContent_Row_320"> 
     <td><span></span></td><td align="left" colspan="4" style="background-color:WhiteSmoke;"><span id="MainContent_lblItem_320" style="color:DimGray;font-weight:bold;">Sills</span></td> 
    </tr><tr id="MainContent_Row_321"> 
     <td align="left"><span></span></td><td><span id="MainContent_lblItem_321" style="font-weight:normal;">Plates</span></td><td align="left"><select name="ctl00$MainContent$ddlSelection_321" id="ddlSelection_321" style="width:98%;"> 
      <option selected="selected" value="0">--Select One--</option> 
      <option value="1">Single PT</option> 
      <option value="2">Single KD</option> 
      <option value="3">Double PT</option> 
      <option value="233">Plans &amp; Specs</option> 
      <option value="234">Other</option> 

     </select></td><td align="center"><input name="ctl00$MainContent$txtDesc_321" type="text" maxlength="250" id="txtDesc_321" style="width:100%;" /></td><td align="center"><span id="lblLeadTime_321" style="color:White;">7</span></td> 
    </tr><tr id="MainContent_Row_330"> 
     <td><span></span></td><td align="left" colspan="4" style="background-color:WhiteSmoke;"><span id="MainContent_lblItem_330" style="color:DimGray;font-weight:bold;">Studs</span></td> 
    </tr><tr id="MainContent_Row_331"> 
     <td align="left"><span></span></td><td><span id="MainContent_lblItem_331" style="font-weight:normal;">Basement</span></td><td align="left"><select name="ctl00$MainContent$ddlSelection_331" id="ddlSelection_331" style="width:98%;"> 
      <option selected="selected" value="0">--Select One--</option> 
      <option value="4">88&quot;</option> 
      <option value="5">8&#39;</option> 
      <option value="6">92 5/8&quot;</option> 
      <option value="7">104 5/8&quot;</option> 
      <option value="8">10&#39;</option> 
      <option value="235">Plans &amp; Specs</option> 
      <option value="236">Other</option> 

     </select></td> 
</tbody>

これは私がこれを行うために使用しているjqueryですが、動作していないため、わかりません。

$('#Lumber :input').each(function() { 
    if ($(this).is('select')) { 
     var value = $(this).val(); 
     if (value == 0) { 
      $(this).closest('input[type=text]').attr('disabled', 'disabled'); 
     } 
    } 
});

出典

2017-08-02 jaz1976

あなたはこの100％作業を試すことができます。 https://output.jsbin.com/hedusor

https://jsbin.com/hedusor/edit?html,output

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
    <script> 
    $(document).ready(function(){ 
     $('#Lumber select').each(function() { 
      var value = $(this).find('option:selected').val(); 
      if (value == 0) { 
       $(this).closest('tr').find('input[type=text]').attr('disabled', 'disabled'); 
      } 
     }); 
     $('#Lumber select').on('change', function() { 
      var value = $(this).find('option:selected').val(); 
      if (value == 0) { 
       $(this).closest('tr').find('input[type=text]').attr('disabled', 'disabled'); 
      } 
     else{ 
      $(this).closest('tr').find('input[type=text]').removeAttr('disabled'); 
     } 
     }); 
    }); 
    </script> 
</head> 
<body> 
<table id="Lumber"> 
<tbody> 
    <tr id="MainContent_Row_310" style="background-color:LightGrey;"> 
     <td align="left" colspan="4"><span id="MainContent_lblItem_310" style="color:DimGray;font-weight:bold;">Framing Materials</span></td><td align="center"><span id="lblLeadTime_310">7</span></td> 
    </tr><tr id="MainContent_Row_311"> 
     <td align="left"><span></span></td><td><span id="MainContent_lblItem_311" style="color:Brown;font-weight:normal;">Species</span></td><td align="left"><select name="ctl00$MainContent$ddlSelection_311" id="ddlSelection_311" style="width:98%;"> 
      <option value="0">--Select One--</option> 
      <option selected="selected" value="213">SPF</option> 
      <option value="214">DF</option> 
      <option value="215">FRT</option> 
      <option value="217">FSC</option> 
      <option value="218">SYP</option> 
      <option value="219">LSL</option> 
      <option value="216">Versa Stud</option> 
      <option value="231">Plans &amp; Specs</option> 
      <option value="232">Other</option> 

     </select></td><td align="center"><input name="ctl00$MainContent$txtDesc_311" type="text" maxlength="250" id="txtDesc_311" style="color:Brown;width:100%;" /></td><td align="center"><span id="lblLeadTime_311" style="color:White;">7</span></td> 
    </tr><tr id="MainContent_Row_320"> 
     <td><span></span></td><td align="left" colspan="4" style="background-color:WhiteSmoke;"><span id="MainContent_lblItem_320" style="color:DimGray;font-weight:bold;">Sills</span></td> 
    </tr><tr id="MainContent_Row_321"> 
     <td align="left"><span></span></td><td><span id="MainContent_lblItem_321" style="font-weight:normal;">Plates</span></td><td align="left"><select name="ctl00$MainContent$ddlSelection_321" id="ddlSelection_321" style="width:98%;"> 
      <option selected="selected" value="0">--Select One--</option> 
      <option value="1">Single PT</option> 
      <option value="2">Single KD</option> 
      <option value="3">Double PT</option> 
      <option value="233">Plans &amp; Specs</option> 
      <option value="234">Other</option> 

     </select></td><td align="center"><input name="ctl00$MainContent$txtDesc_321" type="text" maxlength="250" id="txtDesc_321" style="width:100%;" /></td><td align="center"><span id="lblLeadTime_321" style="color:White;">7</span></td> 
    </tr><tr id="MainContent_Row_330"> 
     <td><span></span></td><td align="left" colspan="4" style="background-color:WhiteSmoke;"><span id="MainContent_lblItem_330" style="color:DimGray;font-weight:bold;">Studs</span></td> 
    </tr><tr id="MainContent_Row_331"> 
     <td align="left"><span></span></td><td><span id="MainContent_lblItem_331" style="font-weight:normal;">Basement</span></td><td align="left"><select name="ctl00$MainContent$ddlSelection_331" id="ddlSelection_331" style="width:98%;"> 
      <option selected="selected" value="0">--Select One--</option> 
      <option value="4">88&quot;</option> 
      <option value="5">8&#39;</option> 
      <option value="6">92 5/8&quot;</option> 
      <option value="7">104 5/8&quot;</option> 
      <option value="8">10&#39;</option> 
      <option value="235">Plans &amp; Specs</option> 
      <option value="236">Other</option> 

     </select></td> 
</tbody> 
</table> 
</body> 
</html>

出典

2017-08-02 15:38:10

なんてこった、なぜ私は自分でそれを見つけることができませんでした。ここで

デモです。最も近い（ 'tr'）。find（ 'input [type = text]'）は、私が見逃していたものです。ありがとうCKG。 – jaz1976

特定の行ごとにテキストフィールドを見つける必要があります。 –

値が0になる前にselectを選択したときにテキストボックスを無効にする方法

答えて

関連する問題