Немного о jquery

[Masque]

Вопрос относительно проверки формы "на лету".
Ситуация следующая:
есть форма, упакованная в таблицу (тег form внешний), в ней в одной из строк есть три блока td, в каждом блоке есть один абзац (p) с радиокнопкой, три эти радиокнопки объединены в одну группу (name="43"). Помимо этого в каждом блоке есть еще некоторое количество полей, разное для разных блоков.
Требуется, чтобы при переключении радиокнопок активировался тот кусок формы, который находится в данном блоке (шрифт черный, поля ввода доступны и в поле class проставлена метка необходимости проверки), а остальные затенялись (шрифт менялся на серый, а поля ввода становились disabled, убиралась метка необходимости проверки).

Как это должно примерно хотя бы выглядеть?
Прошу прощения, если описал проблему излишне путано, если есть вопросы, постараюсь ответить.

@темы: JavaScript

Comments

fo-rest.ru
глянь на странице бронирования как сделан трансфер

[Masque]

хм.. интересный вариант, но в моем случае, я так понимаю, придется плясать от параметра value выбранной радиокнопки.
а как текст серым сделать? можно ли туда $(#sub).addClass("Active") прописать или раз уж начал обычным js пользоваться, нефиг трогать jquery?

[tven]

Я бы глянул на конструкцию вида
elems=${'block_id > *:input');
for (i=0;i<elems.length;i++) elems[i].disabled='disabled';

Код очень-очень приблизительный, так, на уровне идеи.
Перемешать "чистый" js с jquery можно; jquery, фактически, это библиотека функций.

Masque Честно говоря не знаю. У нас это делал "специально обученный" человек, а я в этом не очень силён.

[Masque]

tven, что-то не очень понял предложенный вариант. При выборе первого пункта, а потом переключения на второй, первый блок остается активным. Или как-то так.

Можно ли менясь цвета через свойство .style.color или без метки !important в стиле абзаца ничего не получится?

[La personne mystique]

Что-нибудь вроде..?
Серый цвет .disabled-блоков задать в стиле...

<table>
<tr><td id="part1">
    <p><input type="radio" class="option" name="option" value="1" checked="checked" /></p>
    <div class="contents">
        Обязательное поле: <input type="text" class="necessary" /><br />
        Необязательное поле: <input type="text" /><br />
        ...
    </div>
</td></tr>
<tr><td id="part2">
    <p><input type="radio" class="option" name="option" value="2" /></p>
    <div class="contents">...</div>
</td></tr>
<tr><td id="part3">
    <p><input type="radio" class="option" name="option" value="3" /></p>
    <div class="contents">...</div>
</td></tr>
</table>
<sсriрt type="text/javasсript"></sсriрt>

хотя это, видимо, не до конца соответствует философии jQuery, но я ей никак не проникнусь )

[Тигр]

Вообщем- то мысль выглядит так.

$('.all_form_blocks').attr('disabled', 'disabled');
$('.selection_'+$('radio:checked').val()).attr('disabled', '');

La personne mystique, пиши меньше - делай больше. Философия JQuery. )

[La personne mystique]

$('.all_form_blocks').attr('disabled', 'disabled'); $('.selection_'+$('radio:checked').val()).attr('disabled', '');

мда сдаюсь)

[Тигр]

La personne mystique, для эффективной работы с JQuery нужно знать CSS 1,2,3 - для написания простых селекторов, там где хочется поставить цикл с кучей if'ов.

[Masque]

Тигр так, куда при этом какие id прописывать?

[Тигр]

Masque, отличие id от класса знаем-с? =) ID может быть у одного элемента. Класс у нескольких.

Тебе надо сделать три класса зависящие от комбинации формы. В моем примере selection_1, selection_2, selection_3.
Также у всех полей должен быть общий класс по которому проводится сброс предидущего состояния формы. В моем примере all_form_blocks
И последнее - у самих переключателей тоже должен быть общий класс. К примеру radio_selector. Используя свойство checked - можно получить выделенный элемент.

[Masque]

хорошо, т.е. эта функция вешается на $("input[name='select']").click (function() {те две строки})

[alhames]

Masque

$('tr.row-form input:radio').change(function() {
    $('tr.row-form td').removeClass('active');
    $('td.selection_'+$(this).val()).addClass('active');
});

Мб так проще? TR будет иметь клас row-form, а три вложенных TD будут иметь класс selection_+значение вложенного radio.
Соответственно в CSS прописываем все .active [элемент] { свойства элемента когда ячейка активна }

P.S. Я больше люблю eq() юзать