Question

I have a table that contains multiple rows. Each row contains 5 columns (or 5 TDs). Inside of the first TD is a text field and a select box. The 4 other TDs each contain a table that contains a set of radio buttons.

<tr bgcolor=#ffffff>
<td valign=center>
  <select name=player1>
  <option>0</option>
  <option>1</option>
  </select>
  <input type="text" id="PlayerLocal1" name=p1name size=20>
</td>
<td>
  <table border=1>
    <tr>
      <td>
    <table border=0 cellspacing=0 cellpadding=0>
        <tr>
            <td><input type=radio name=p1o1 value="1B">1B
            <td><input type=radio name=p1o1 value="FO">FO
        </tr>
    </table>
      </td>
    </tr>
  </table></td></tr>

Basically I want the radio buttons in each of the 4 other TDs disabled unless the user inputs a value in the text field OR selects a value in the select field.

I was thinking of adding a class to each TR, then somehow traversing each TD that isn’t the first TD and removing the disabled attribute (to enable it), but I can’t wrap my head around how create the conditional statement or whether I need to use Parents() or Siblings() or something else to traverse.

Quick Clarification:
My table has multiple rows and multiple columns (I only showed 2 of the TDs to save space, but the other 3 TDs looks just like the 2nd). For instance, player1 and p1name1 will be player2 and p2name2 in the second row. So, if the text/select is changed in the FIRST row, it shouldn’t enable all radio buttons in ALL rows — only radio buttons the FIRST row.

Any help is appreciated!

Answer 1

$('input:radio').attr('disabled', true);

$('select[name=player1], input[name=p1name]').change(function(){
   $('input:radio').attr('disabled', false);
});

I would suggest putting quotes around attributes though, like name="p1name" rather than name=p1name. Crazy things can happen when you don’t.

Also, when you give elements id’s or classes, you can be a bit more precise with which elements are selected and which aren’t. Say, for example, you only wanted one of the radio buttons to be disabled, you could do that easily, whereas without the id, it’s much more difficult.

As per request:

give the selects and input’s a class, like

<select class="affector"></select>
<input type="text" class="affector" />

and you can traverse like this:

$('.affector').change(function(){
   $(this).parents('tr').find('input:radio').attr('disabled', false);
});

If you were to have more radio buttons somewhere in the <tr>, and you only wanted to enable a select group, again, having classes would be beneficial. You could substitute the class selector for the “input:radio” in the .find() and only those would be affected.

Addition:

If they”re the only selects and text inputs on the page, you could also forgo adding the classes and use type selectors instead:

$('select, input:text').change(function(){
   $(this).parents('tr').find('input:radio').attr('disabled', false);
});