如何禁用文本框時選擇它有一個值0

我有這張表，併爲每個值爲0的選擇，我需要禁用選擇後面的文本框。這是桌子。如何禁用文本框時選擇它有一個值0

<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>

這裏是我用來試圖做到這一點，但它不工作，我不知道爲什麼。

$('#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

回答

相關問題