spex5 spex5 - 3 months ago 7
HTML Question

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>




Answer

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>