Zdarza się czasem potrzeba zablokowania pól w formularzu w zależności od wybranej przez użytkownika opcji. Oczywiście możemy posłużyć się tu JavaScript i w zależności od klikniętego radio czy checkbox, ustawiać atrybut disabled dla wybranego elementu lub grupy elementów.
A czy możliwe jest blokowanie pól tylko w CSS?
Oczywiście, że.... nie... i tak. Nie nadamy atrybutu disabled poprzez CSS (wartości z pól będą przesyłane), ale nie zawsze jest nam to potrzebne. I tak kontrolę wprowadzonych danych przeprowadzamy często po stronie serwera. Jak więc zasymulować działanie atrybutu disabled tylko w CSS?
Na pewno posłużymy się tzw. checkbox hack, czyli na podstawie pseudoklasy :checked radio lub checkbox, będziemy zmieniać właściwości wyznaczonych pól. Aby pole udawało pole zablokowane przede wszystkim wykorzystamy właściwość pointer-events, którą ustawimy na none. Pole nie będzie wtedy odbierać żadnych zdarzeń od użytkownika. Wygląd takiego pseudo-disabled pola możesz ustalić sam - możesz go również nie zmieniać. Ja nadam mu opacity 50%.
Jak to wygląda?
<fieldset><label for="opcja1">Opcja 1</label><input type="radio" name="opcja" value="1" id="opcja1" checked/> <input type="text" name="text1" /></fieldset>
<fieldset><label for="opcja2">Opcja 2</label><input type="radio" name="opcja" value="1" id="opcja2" /><input type="text" name="text2" /></fieldset>
input[name="opcja"]+input {
opacity: 0.5;
pointer-events: none;
}
input[name="opcja"]:checked+input {
color: #000;
opacity: 1;
pointer-events: auto;
}