Атрибут disabled

disabled атрибуты HTML формасының элементін блоктайды, яғни оны белсенді емес етеді. Мәні жоқ атрибут болып табылады.

Элементтерді блоктау әдетте пайдаланушыға кейбір мәндерді өзгертуге тыйым салу үшін қажет (олар пайдаланушыға форма элементтері түрінде көрсетілуі керек). Кейде элементтер JavaScript көмегімен блокталады (және блоктаудан босатылады).

Мінез-құлық

Түйме жағдайында (button немесе input type атрибуты button, reset немесе submit мәндерімен) блоктау түймені басу мүмкін емес екенін білдіреді. Мәтін енгізу өрісі жағдайында (input немесе textarea) ондағы мәтінді өзгерту немесе көшіру мүмкін болмайды. Чекбокстар және радио түймелері жағдайында олардың күйін (белгіленген немесе белгіленбеген) өзгерту мүмкін болмайды. Ашылмалы тізімдер select жағдайында таңдалған тізім нұқтасын өзгерту мүмкін болмайды.

Блокталған элемент әдепкі бойынша сұр фонға ие болады. Ол сондай-ақ Tab батырмасы арқылы ауысуларға қатыспайды.

Мысал . Блокталған түйме

disabled атрибуты арқылы түймені блоктайық. Салыстыру үшін жанында блокталмаған түйменің мысалы бар (оны басуға тырысайық):

<button disabled>мәтін</button>
<button>мәтін</button>

Мысал . Блокталған чекбокс

Енді блокталған чекбоксты қарап көрейік. Салыстыру үшін жанында блокталмаған чекбокстың мысалын қарастырамыз:

<input type="checkbox" disabled>
<input type="checkbox">

Мысал . Блокталған және белгіленген чекбокс

Блокталған және checked атрибуты арқылы белгіленген чекбокстың қалай көрінетінін қарап көрейік. Салыстыру үшін жанында блокталмаған белгіленген чекбокстың мысалына жүгінейік:

<input type="checkbox" disabled checked>
<input type="checkbox" checked>

Мысал . Блокталған мәтін енгізу өрісі

Енді енгізу өрісін блоктайық. Салыстыру үшін жанында блокталмаған енгізу өрісінің мысалын қарастырамыз:

<input type="text" value="мәтін" disabled>
<input type="text" value="мәтін">

Мысал . Блокталған мәтін аймағы

Мұнда біз блокталған мәтін аймағын көреміз (блокталған textarea өлшемін өзгертуге болатынына назар аударыңыз). Салыстыру үшін жанында блокталмаған мәтін аймағының мысалына жүгінейік:

<textarea disabled>мәтін</textarea>
<textarea>мәтін</textarea>

Мысал . Блокталған ашылмалы тізім

Блокталған select қалай жұмыс істейтінін қарап көрейік. Салыстыру үшін жанында блокталмаған ашылмалы тізімнің мысалын қарастырамыз:

<select disabled>
	<option>қала1</option>
	<option selected>қала2</option>
	<option>қала3</option>
	<option>қала4</option>
</select>
<select>
	<option>қала1</option>
	<option selected>қала2</option>
	<option>қала3</option>
	<option>қала4</option>
</select>

Сондай-ақ қараңыз

disabled жалған сыныбы,
ол блокталған элементке стильдерді орнатады
enabled жалған сыныбы,
ол блокталмаған элементке стильдерді орнатады