如果选择第一个TD，则禁用一行中的所有其他TD [英] Disable all other TDs in a row if first TD is selected

问题描述

我有一个包含多行的表。每行包含5列（或5个TD）。第一个TD的内部是文本字段和选择框。其他4个TD包含一个包含一组单选按钮的表。

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>

基本上我希望其他4个TD中的每一个都禁用单选按钮，除非用户输入一个值文本字段或选择选择字段中的值。

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.

我正在考虑为每个TR添加一个类，然后以某种方式遍历每个不是第一个TD的TD并删除disabled属性（以启用它），但我不能围绕如何创建条件语句或我是否需要使用Parents（）或兄弟姐妹（）或其他东西来遍历。

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.

快速澄清：
我的表有多行和多列（我只显示了两个TD来节省空间，但是其他3个TD看起来就像第2个）。例如，player1和p1name1将是第二行中的player2和p2name2。因此，如果在第一行中更改了text / select，则不应启用所有行中的所有单选按钮 - 只有单选按钮才能显示第一行。

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.

感谢任何帮助！

推荐答案

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

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

我建议在属性周围加上引号，例如 name =p1name 而不是 name = p1name 。当你不这样做时，会发生疯狂的事情。

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

此外，当您给出元素id或类时，您可以更精确地选择哪些元素，哪些元素不是。比方说，例如，你只想要禁用其中一个单选按钮，你可以轻松地做到这一点，而没有id，则更难。

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.

根据要求：

给选择和输入一个类，比如

give the selects and input's a class, like

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

你可以这样遍历：

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

如果你在< tr>中的某处有更多单选按钮，你只想启用一个选择组，再次，让课程有益。您可以将类选择器替换为 .find（）中的input：radio，只有那些会受到影响。

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.

添加：

如果它们是页面上唯一的选择和文本输入，您还可以放弃添加类改为使用类型选择器：

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);
});

这篇关于如果选择第一个TD，则禁用一行中的所有其他TD的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！