首页 文章

循环 Span 并找到最近的复选框

提问于
浏览 166
1

我有这个jquery需要遍历每一行,如果第四列是Pending,那么它应该禁用该复选框 .

我的jquery一直工作到循环,我不知道它为什么不进入if语句,我如何找到最接近的复选框?

HTML can't be edited. Platform restricted.

我尝试以相反的方式执行此操作,我将遍历复选框并找到具有“PENDING”值的最接近的 Span ,但它不起作用 .

$(document).ready(function() {
  $('#button').click(function() {
    var zoneObject = $('.cell').find('span');
    $(zoneObject).each(function() {
      var text = $(this).text().replace(/ /g, '');
      var pending = "Pending";
      // if text is pending then check box is disabled
      if (text === pending) {
        var chx = $(this).find(':checkbox');
        $(chx).prop("disabled", true);
      }
    });
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>

<body>
  <button id='button'>
    Click Me
    </button>
  <table id='table1'>
    <tbody>
      <tr class='und'>
        <td>
          <table>
            <tbody>
              <tr>
                <td class='cell'>
                  <input type='checkbox' />

                </td>
                <td class='cell'>
                  <span>
                      one
                    </span>

                </td>
                <td class='cell'>
                  <span>
                      233232
                    </span>

                </td>
                <td class='cell'>
                  <span>
                      Pending   
                    </span>
                </td>
              </tr>
            </tbody>
          </table>
        </td>
      </tr>
      <tr class='und'>
        <td>
          <table>
            <tbody>
              <tr>
                <td>
                  <input type='checkbox' />
                </td>
                <td class='cell'>
                  <span>
                      one
                    </span>
                </td>
                <td class='cell'>
                  <span>
                      233232
                    </span>
                </td>
                <td class='cell'>
                  <span>
                      s
                    </span>
                </td>
              </tr>
            </tbody>
          </table>
        </td>
      </tr>
    </tbody>
  </table>
</body>
</html>

2 回答

  • 0

    你必须改变以下两件事

    1) . if (text === pending) //Here might be remains newline character thats why you have to use trim function to remove leading and trailing blank space

    if ($.trim(text) === pending)

    2) . var chx = $(this).find(':checkbox');

    var chx =$(this).closest('tr').find(':checkbox');

    DEMO

  • 0

    而不是 replace 使用 trim 来删除字符串前后的空格 .

    $(document).ready(function() {
      $('#button').click(function() {
        var zoneObject = $('.cell').find('span');
        $(zoneObject).each(function() {
          var text = $(this).text();
          text=text.trim();
          var pending = "Pending";
          // if text is pending then check box is disabled
          if (text == pending) {
            var chx = $(this).parent().parent().find(':checkbox');
            $(chx).prop("disabled", true);
          }
        });
      });
    });
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <html>
    
    <body>
      <button id='button'>
        Click Me
        </button>
      <table id='table1'>
        <tbody>
          <tr class='und'>
            <td>
              <table>
                <tbody>
                  <tr>
                    <td class='cell'>
                      <input type='checkbox' />
    
                    </td>
                    <td class='cell'>
                      <span>
                          one
                        </span>
    
                    </td>
                    <td class='cell'>
                      <span>
                          233232
                        </span>
    
                    </td>
                    <td class='cell'>
                      <span>
                          Pending   
                        </span>
                    </td>
                  </tr>
                </tbody>
              </table>
            </td>
          </tr>
          <tr class='und'>
            <td>
              <table>
                <tbody>
                  <tr>
                    <td>
                      <input type='checkbox' />
                    </td>
                    <td class='cell'>
                      <span>
                          one
                        </span>
                    </td>
                    <td class='cell'>
                      <span>
                          233232
                        </span>
                    </td>
                    <td class='cell'>
                      <span>
                          s
                        </span>
                    </td>
                  </tr>
                </tbody>
              </table>
            </td>
          </tr>
        </tbody>
      </table>
    </body>
    </html>
    

相关问题