08:26 

Немного о jquery

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

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

@темы: JavaScript

Комментарии
2010-02-27 в 08:37 

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

2010-02-27 в 08:49 

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

2010-02-27 в 09:17 

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

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

2010-02-27 в 09:23 

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

2010-02-27 в 09:58 

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

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

2010-02-27 в 10:32 

 
Что-нибудь вроде..?
Серый цвет .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"><!--

    function change_section(id)
    {
        for (i = 1; i <= 3; i++)
        {
            $('#part' + i + ' .contents')[id == i ? 'removeClass' : 'addClass']('disabled');
            $('#part' + i + ' .contents input').each(id == i ?
                    function() {
                        this.removeAttribute('disabled');
                        if ($(this).hasClass('necessary')) $(this).addClass('to-be-checked');
                    } : function() {
                        this.setAttribute('disabled', 'disabled');
                        $(this).removeClass('to-be-checked');
                    }
                );
        }
    }

    $('.option').click(function() { change_section(this.value); });
    $(document).ready(function() { change_section(1); });

//--></sсriрt>


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

2010-02-27 в 11:00 

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

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

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

2010-02-27 в 11:04 

 
$('.all_form_blocks').attr('disabled', 'disabled'); $('.selection_'+$('radio:checked').val()).attr('disabled', '');
мда :shy: сдаюсь)

2010-02-27 в 11:23 

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

2010-02-27 в 11:24 

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

2010-02-27 в 11:41 

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

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

2010-02-27 в 11:51 

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

2010-02-27 в 14:28 

alhames
alhames.ru
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() юзать

     

@web-программирование

главная