Question

我有这个jquery，需要遍历每一行，如果第四列是Pending，则应该禁用该复选框。

我的jquery一直工作到循环，我不知道为什么它不输入if语句，以及如何找到最接近的复选框？

HTML无法编辑。平台受限。

我尝试用另一种方法来完成该操作，在该位置我将遍历复选框并找到具有“ PENDING”值的最近跨度，但这没有用。

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

Answer 1

您必须更改以下两项内容

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

Answer 2

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

遍历跨度并找到最接近的复选框

2 个答案: