Mam ten kod HTML:
<input type="text" name="textField" />
<input type="submit" value="send" />
Jak mogę zrobić coś takiego:
- Gdy pole tekstowe jest puste, przesyłanie powinno być wyłączone (wyłączone = „wyłączone”).
- Gdy coś zostanie wpisane w polu tekstowym, aby usunąć wyłączony atrybut.
- Jeśli pole tekstowe ponownie stanie się puste (tekst zostanie usunięty), przycisk przesyłania powinien zostać ponownie wyłączony.
Próbowałem czegoś takiego:
$(document).ready(function(){
$('input[type="submit"]').attr('disabled','disabled');
$('input[type="text"]').change(function(){
if($(this).val != ''){
$('input[type="submit"]').removeAttr('disabled');
}
});
});
… Ale to nie działa. Jakieś pomysły?
javascript
jquery
html
forms
kmunky
źródło
źródło
Odpowiedzi:
Problem polega na tym, że zdarzenie zmiany jest uruchamiane tylko wtedy, gdy fokus zostanie odsunięty od wejścia (np. Ktoś kliknie wejście lub kliknie poza nim). Zamiast tego spróbuj użyć klucza:
źródło
input id="loginButton" type="submit" name="Submit" value="Login" disabled>
pokaże niepełnosprawnego przycisk z CSS klas niepełnosprawnych.źródło
To pytanie ma 2 lata, ale nadal jest dobrym pytaniem i był to pierwszy wynik Google ... ale wszystkie istniejące odpowiedzi zalecają ustawienie i usunięcie atrybutu HTML (removeAttr („disabled”)) „disabled”, co nie jest właściwe podejście. Istnieje wiele nieporozumień dotyczących atrybutu vs. własności.
HTML
„Wyłączone” w
<input type="button" disabled>
znacznikach jest nazywane przez W3C atrybutem logicznym .HTML vs. DOM
Zacytować:
https://stackoverflow.com/a/7572855/664132
JQuery
Związane z:
Istotnych:
Podsumowanie
Aby [...] zmienić właściwości DOM, takie jak [...] wyłączony stan elementów formularza, użyj metody .prop () .
( http://api.jquery.com/attr/ )
Co do części dotyczącej wyłączania przy zmianie: zdarzenie o nazwie „wejście”, ale obsługa przeglądarki jest ograniczona i nie jest to zdarzenie jQuery, więc jQuery nie sprawi, że będzie działać. Zdarzenie zmiany działa niezawodnie, ale jest uruchamiane, gdy element traci fokus. Można więc połączyć te dwa elementy (niektóre osoby również słuchają kluczy i wklejają).
Oto niesprawdzony fragment kodu, który pokazuje, co mam na myśli:
źródło
Aby usunąć wyłączone użycie atrybutu,
i aby dodać wyłączone użycie atrybutu,
Cieszyć się :)
źródło
lub dla nas, którzy nie lubią używać jQ do każdego drobiazgu:
źródło
eric, twój kod nie działał dla mnie, gdy użytkownik wprowadza tekst, a następnie usuwa cały tekst. utworzyłem inną wersję, jeśli ktoś doświadczył tego samego problemu. proszę, ludzie:
źródło
Będzie to działać w ten sposób:
Upewnij się, że w kodzie HTML jest atrybut „wyłączony”
źródło
Oto rozwiązanie dla pola wejściowego pliku .
Aby wyłączyć przycisk przesyłania do pliku, gdy plik nie jest wybrany, a następnie włącz go, gdy użytkownik wybierze plik do przesłania:
HTML:
źródło
możesz również użyć czegoś takiego:
Oto przykład na żywo
źródło
Aby zalogować się do formularza:
JavaScript:
źródło
Jeśli sam przycisk jest przyciskiem w stylu jQuery (za pomocą .button ()), musisz odświeżyć stan przycisku, aby poprawne klasy były dodawane / usuwane po usunięciu / dodaniu wyłączonego atrybutu.
źródło
Powyższe odpowiedzi nie dotyczą również sprawdzania zdarzeń wycinania / wklejania opartych na menu. Poniżej znajduje się kod, którego używam do zrobienia obu tych rzeczy. Zauważ, że akcja faktycznie dzieje się z limitem czasu, ponieważ cięcia i przeszłe zdarzenia faktycznie uruchamiają się przed zmianą, więc limit czasu daje na to trochę czasu.
źródło
Rozwiązanie Vanilla JS. Działa dla całej formy, a nie tylko jednego wejścia.
W pytaniu wybrany tag JavaScript.
Formularz HTML:
Niektóre wyjaśnienia:
W tym kodzie dodajemy zdarzenie keyup w formularzu HTML i przy każdym naciśnięciu klawisza sprawdzamy wszystkie pola wejściowe. Jeśli przynajmniej jedno pole wejściowe, które mamy, jest puste lub zawiera tylko znaki spacji, wówczas przypisujemy prawdziwą wartość wyłączonej zmiennej i wyłączamy przycisk wysyłania.
Jeśli musisz wyłączyć przycisk Prześlij, aż wszystkie wymagane pola wejściowe zostaną wypełnione - zamień:
z:
gdzie wymagane_wejścia jest już zadeklarowane tablica zawierająca tylko wymagane pola wejściowe.
źródło
Możemy po prostu mieć, jeśli & else. Jeśli założymy, że twoje dane wejściowe są puste, możemy to zrobić
w przeciwnym razie możemy zmienić fałsz na prawdziwy
źródło
Wyłączyć:
$('input[type="submit"]').prop('disabled', true);
Włączyć:
$('input[type="submit"]').removeAttr('disabled');
Powyższy kod aktywacji jest dokładniejszy niż:
Możesz użyć obu metod.
źródło
Musiałem trochę popracować, aby dopasować to do mojego przypadku użycia.
Mam formularz, w którym wszystkie pola muszą mieć wartość przed przesłaniem.
Oto co zrobiłem:
Dziękujemy wszystkim za odpowiedzi tutaj.
źródło
Sprawdź poniższy kod, aby włączyć lub wyłączyć przycisk Prześlij
źródło
spójrz na ten fragment mojego projektu
$(this).attr('disabled', 'disabled');
źródło
Dostarczone są wszystkie typy rozwiązań. Więc chcę wypróbować inne rozwiązanie. Po prostu łatwiej będzie, jeśli dodasz
id
atrybut w polach wejściowych.Teraz jest twój
jQuery
źródło
Mam nadzieję, że poniższy kod pomoże komuś .. !!! :)
źródło