如何在select之前禁用文本框，其值为0

时间：2017-08-02 15:21:52

标签： jquery

我有这个表，并且对于每个值为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');
        }
    }
});

1 个答案:

答案 0 :(得分：0)

您可以尝试 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>
相关问题
最新问题