Поговоримо про те, як можна деактивувати/активувати поля форми. Ця потреба може виникнути в деяких ситуаціях, коли для користувача потрібно зробити неможливим зміна значення полів, або навпаки. У html для деактивації полів існує атрибут disabled. Тобто якщо атрибут присутній, то поле неактивно, в іншому випадку, за замовчуванням поле є активним. Більш гнучко використовувати форму нам допоможе бібліотека JQuery.
Щоб встановити атрибут disabled для тега, можна скористатися функцією .prop().

$(“input”).prop(‘disabled’, true);
$(“input”).prop(‘disabled’, ‘false’);

Варто звернути увагу на те, що в JQuery бібліотеках версії 1.5 і нижче немає функції .prop().
Вирішується ця проблема альтернативної функцією .attr().
Деактивуємо поле, за допомогою функції .attr():

$(“input”).attr(‘disabled’,’disabled’);

Щоб знову активувати елемент, можна скористатися функцією .removeAttr()

$(“input”).removeAttr(‘disabled’);

Так само існує варіант, не має залежності від версії JQuery. Можна звернутися безпосередньо до об’єкта DOM, після виникнення будь-якої події.

this.disabled = true;

Якщо ви маєте справу з одним елементом, то цей варіант працює трохи швидше попередніх, проте функції, описані вище зручні для створення залежною зв’язки декількох полів.

Додав: htmaker, 07.07.2014 р.
(1 голосів, середній: 3,00 з 5)

Завантаження…

Діліться з друзями:

См. також:


Мета тег robots, приклади використання
Рубрика: Html, CSS, Javascript, SEO

Stimed – задаємо CSS-стилі по часу
Рубрика: Html, CSS, Javascript

Небезпека використання атрибуту target=”_blank”
Рубрика: Html, CSS, Javascript, Інф. безпека

Нескінченна анімація обертання на CSS
Рубрика: Html, CSS, Javascript

Анімація обертання при наведенні курсору
Рубрика: Html, CSS, Javascript

Стилізація виділення номера телефону до мобільних браузерах
Рубрика: Html, CSS, Javascript

Список вибору на JQuery
Рубрика: Html, CSS, Javascript

Фіксований заголовок таблиці HTML
Рубрика: Html, CSS, Javascript

Ефекти кнопок для сайту
Рубрика: Html, CSS, Javascript