javascript - 根据另一个元素的值禁用一个元素的 url

Question

我有一个包含多行的表格。在一列中，有一个链接(a 列)。在第二列中，有字符串“Yes”或“No”(b 列)。

如果 b 列中的单元格显示“否”，我希望 a 列中它左侧单元格上的链接被禁用。

我正在使用 .each() 遍历 b 列中的每个 td 以查看值是"is"还是“否”。似乎即使 b 列中的单元格为"is"，它仍会禁用(重命名)匹配单元格上的链接。我错过了什么？

$(document).ready(function () {

  $("td.regFull").each(function () {

    console.log($(this).text());
    if($(this).text() !== 'No') {
      $('td.regLink a').replaceWith('Closed');
    }
    
  });

});

td {
  border: 1px solid black;
  padding: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <th>Link</th>
    <th>Registration Open</th>
  </tr>
  <tr>
    <td class="regLink">
      <a href="#">Register</a>
    </td>
    <td class="regFull">
      No
    </td>
  </tr>
  <tr>
    <td class="regLink">
      <a href="#">Register</a>
    </td>
    <td class="regFull">
      Yes
    </td>
  </tr>
</table>

Answer 1

我的建议是:

为了禁用链接，您可以删除 href 属性。

要选择所有链接，您可以将所有链接缩减为一行:

$("td.regFull:contains('No')").siblings('td.regLink').children('a').removeAttr('href')

片段:

$(function () {
  
 $("td.regFull:contains('No')").siblings('td.regLink').children('a').removeAttr('href').text('Closed');

});

td {
  border: 1px solid black;
  padding: 5px;
}

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>

<table>
    <tr>
        <th>Link</th>
        <th>Registration Open</th>
    </tr>
    <tr>
        <td class="regLink">
            <a href="#">Register</a>
        </td>
        <td class="regFull">
            No
        </td>
    </tr>
    <tr>
        <td class="regLink">
            <a href="#">Register</a>
        </td>
        <td class="regFull">
            Yes
        </td>
    </tr>
   <tr>
        <td class="regLink">
            <a href="#">Register</a>
        </td>
        <td class="regFull">
            No
        </td>
    </tr>
    <tr>
        <td class="regLink">
            <a href="#">Register</a>
        </td>
        <td class="regFull">
            Yes
        </td>
    </tr>
</table>