Отключите все другие TD в ряду, если выбран первый TD - PullRequest
Новая
       19

Отключите все другие TD в ряду, если выбран первый TD

2 голосов
/ 08 января 2010

У меня есть таблица, которая содержит несколько строк. Каждая строка содержит 5 столбцов (или 5 TD). Внутри первого ТД находится текстовое поле и поле выбора. Каждый из 4 других TD содержит таблицу с набором переключателей. 

<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 были отключены, если пользователь не вводит значение в текстовое поле ИЛИ не выбирает значение в поле выбора.

Я думал о том, чтобы добавить класс к каждому TR, затем каким-то образом обойти каждый TD, который не является первым TD, и удалить атрибут disabled (чтобы включить его), но я не могу обернуться, как создать условное выражение утверждение или мне нужно использовать Parents () или Siblings () или что-то еще, чтобы пройти.

Быстрое уточнение: Моя таблица имеет несколько строк и несколько столбцов (я только показал 2 из TD, чтобы сэкономить место, но остальные 3 TD выглядят так же, как 2-й). Например, player1 и p1name1 будут player2 и p2name2 во втором ряду. Таким образом, если текст / выбор изменяется в первой строке, он не должен включать все переключатели во всех строках - только переключатели в первой строке.

Любая помощь приветствуется!

Ответы [ 2 ]

3 голосов
/ 08 января 2010 
$('input:radio').attr('disabled', true);

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

Я бы предложил поставить кавычки вокруг атрибутов, например, name="p1name", а не name=p1name. Безумные вещи могут случиться, когда вы этого не сделаете.

Кроме того, когда вы присваиваете идентификаторы или классы элементов, вы можете быть более точными, какие элементы выбраны, а какие нет. Скажем, например, что вы хотели отключить только одну из переключателей, вы могли бы сделать это легко, тогда как без идентификатора это намного сложнее.

По запросу:

присваивает классам select и input, например, 

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

и вы можете пройти следующим образом: 

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

Если бы у вас было больше переключателей где-нибудь в <tr>, и вы хотели только включить выбранную группу, опять же, наличие классов было бы полезно. Вы можете заменить селектор класса на «input: radio» в .find(), и будут затронуты только те.

Дополнительно:

Если они являются единственными элементами выбора и ввода текста на странице, вы также можете отказаться от добавления классов и использовать вместо них селекторы типа: 

$('select, input:text').change(function(){
   $(this).parents('tr').find('input:radio').attr('disabled', false);
});
0 голосов
/ 08 января 2010

Вы можете поместить div вокруг тех TD, которые вы можете скрыть, используя javascript. Поиск в Google поможет вам, как скрыть divs :). Удачи!

...