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

Question

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> 

Answer 1

Instead of this line

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

Make it as closest element

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

Answer 2

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> 

Answer 3

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>