CODEWITHSUNDEEP
javascriptjqueryhtml
spex5
spex5

Reputation: 1289

Disable url on an element based on the value of another element

I have a table that will have several rows. In one column, there is a link (column a). In the second column, there is the string "Yes" or "No" (column b).

If a cell in column b says "No", I want the link on the cell directly to the left of it in column a to become disabled.

I'm using .each() to go through each td in column b to see if the value is "Yes" or "No". It seems as though even if the cell in column b is "Yes", it will still disable (rename) the link on the matching cell. What am I missing?

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

Upvotes: 1

Views: 78

Answers (3)

gaetanoM
gaetanoM

Reputation: 42044

My proposal is:

in order to disable a link you may remove the href attribute.

To select all links you may reduce all to one line:

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

The snippet:

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

Upvotes: 1

Zakaria Acharki
Zakaria Acharki

Reputation: 67505

  1. You have to trim the content of .regFull in the condition to remove the spaces.

  2. Go up to the parent tr then select the link inside .regLink :

    $(this).parents('tr').find('.regLink a').replaceWith('Closed');

  3. If a cell in column b says "No", I want the link on the cell directly to the left of it in column a to become disabled.

    So you have to reverse the operator in your condition from !== to ===.

Hope this helps.

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

Upvotes: 1

AB Udhay
AB Udhay

Reputation: 753

Instead of this line

$('td.regLink a').replaceWith('Closed');

Make it as closest element

$(this).closest('td.regLink a').replaceWith('Closed');

Upvotes: 1

Related Questions