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

时间:2016-08-17 19:31:18

标签: javascript jquery html

我有一个包含多行的表。在一列中,有一个链接(列a)。在第二列中,有字符串"是"或"否" (b栏)。

如果b列中的单元格显示" No",我希望单元格中的链接直接位于a列的左侧,以便禁用。

我使用.each()浏览b列中的每个td,看看该值是否为"是"或"否"。好像即使b列中的单元格是"是",它仍然会禁用(重命名)匹配单元格上的链接。我错过了什么?



$(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>
&#13;
&#13;
&#13;

3 个答案:

答案 0 :(得分:1)

而不是这一行

$(&#39; td.regLink a&#39;)。replaceWith(&#39; Closed&#39;);

将其设为最接近的元素

$(this).closest(&#39; td.regLink a&#39;)。replaceWith(&#39; Closed&#39;);

答案 1 :(得分: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>

答案 2 :(得分:1)

  1. 您必须在条件中修剪.regFull的内容以删除空格。

  2. 转到父tr,然后选择.regLink

    中的链接
    $(this).parents('tr').find('.regLink a').replaceWith('Closed');
    
  3.   

    如果b列中的单元格显示“No”,我希望单元格中的链接直接位于a列的左侧,以便禁用。

    因此,您必须在!=====的情况下撤销您的运营商。

  4. 希望这有帮助。

    $(document).ready(function () {
    
      $("td.regFull").each(function () {
    
        console.log($(this).text().trim());
    
        if($(this).text().trim() === 'No') {
          $(this).parents('tr').find('.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>