Question

Using this as a simplified example, assume I have a table that has some radio buttons in it followed by a div element with a link in it. This pattern is then repeated some unknown number of times like so:

<table class="rdoBtnList">
    <tbody>
       <tr>
          <td> Person 1 </td>
          <td>
            <label for="rb1">Verified</label>
            <input type="radio" id="rb1" name="rdoBtns" value="Verified" />
            <label for="rb2">Not Verified</label>
            <input type="radio" id="rb2" name="rdoBtns" value="NotVerified" />
          </td>
       </tr>
    </tbody>
 </table>
 <div class="PersonLink"><a href="#">Link to Person 1 page</a></div>
  ..... tables and divs for person 2, 3, ... n, etc

I would like to be able to use jQuery to enable/disable the link in the div following the radio buttons based on the value of the radio button. I can get the value of the radio buttons, but cannot figure out what selector syntax I would use to enable/disable just the div after the radio buttons.

Here is my jQuery so far:

    <script type="text/javascript">
       $(document).ready(function() {
           $(".rdoBtnList > tbody > tr > td > input").change(function() {
           if ($(this).val() == "Verified") {
               // select the link in the div following the table and enable it
           } else {
               // select the link in the div following the table and disable it
           }
        });
       });
    </script>

Answer 1

Like this:

$(this).closest('.rdoBtnList').nextAll('.PersonLink:first').children('a').whatever

closest('.rdoBtnList') will find the table, and nextAll('.PersonLink:first') will find the first .PersonLink after the table.

By the way, the val function returns a normal boolean. You should write if($(this).val()).