Jak wyłączyć lub włączyć przyciski za pomocą JavaScript i JQuery

Czy kiedykolwiek zauważyłeś, jak często, przycisk Przesyłania nie działałby, dopóki wszystkie odpowiednie pola nie zostaną wypełnione w formularzu internetowym? Ta logika jest zaimplementowana przez określenie statusu przycisku (włączonego lub wyłączonego) w zależności od tego, czy pole wejściowe jest wypełnione, czy nie, a następnie wykonanie wymaganej operacji. Jeśli nie masz pewności, jak to wykonać? Bez obaw!

Niniejszy podręcznik wyjaśni metodę włączania i wyłączania przycisków za pomocą JavaScript i JQuery.

Jak wyłączyć lub włączyć przyciski za pomocą JavaScript i JQuery?

Jedną z najbardziej praktycznych rzeczy, które każda aplikacja internetowa zawiera w jej przyciskach, jest włączanie i wyłączanie funkcji. Możesz użyć „wyłączony”Atrybut do włączania lub wyłączania przycisków w JQuery i JavaScript.

Przykład 1: Wyłącz lub włącz przyciski za pomocą JavaScript
W pliku HTML najpierw utworzymy trzy przyciski, przycisk, w którym będą działać akcje, jeden służy do wyłączenia, a drugi służy włączeniu przycisku:

Przycisk
Kliknij, aby wyłączyć
Kliknij, aby włączyć

Zdefiniujemy funkcję „disableButton ()”W celu wyłączenia przycisku poprzez ustawienie wartości atrybutu wyłączonego do„PRAWDA”:

funkcja disableButton ()
dokument.getElementById („przycisk”).niepełnosprawne = true;

W celu włączenia przycisku ustaw wartość właściwości wyłączonej na „FAŁSZ”:

funkcja enableButton ()
dokument.getElementById („przycisk”).niepełnosprawny = false;

Odpowiednie wyjście jest następujące:

Przykład 2: Wyłącz lub włącz przyciski za pomocą JQuery
W tym przykładzie użyjemy JQuery, aby wyłączyć i włączyć przycisk. Aby to zrobić, najpierw utwórz dwa przyciski w pliku HTML. Jeden z nich służy do wyłączenia i włączenia drugiego przycisku:

Przycisk
Kliknij tutaj, aby wyłączyć i włączyć dwukrotnie kliknij

Aby używać jQuery, określ „src„Atrybut w tagu:

W znaczniku wyłącz przycisk jednym kliknięciem, wyzwalając „Kliknij„Wydarzenie w przycisku z id”przełącznik”I ustaw wartość„wyłączony”Atrybut pierwszego przycisku do„PRAWDA". Podobnie na „DBLCLICK„Wydarzenie, ustaw wartość atrybutu niepełnosprawnego na„FAŁSZ„Aby włączyć„Przycisk”Po dwukrotnym kliknięciu:

$ (dokument).gotowy (funkcja ()
$ ('#toggle').on („kliknij”, funkcja ()
$ („#przycisk”).prop („niepełnosprawny”, true);
);
$ ('#toggle').on („dblclick”, function ()
$ („#przycisk”).prop („niepełnosprawny”, false);
);
);

Wyjście oznacza, że ​​skutecznie wyłączamy i włączamy przycisk za pomocą JQuery:

Przykład 3: Włącz przycisk wyłączony za pomocą JavaScript
Teraz włączymy przycisk Wyłączony po wprowadzeniu tekstu w polu tekstowym za pomocą JavaScript. W tym celu utwórz pole wejściowe i przycisk Prześlij z identyfikatorami „tekst" I "składać". Przycisk Przesyłania jest domyślnie wyłączony przy użyciu atrybutu wyłączonego:

W pliku JavaScript najpierw otrzymamy identyfikatory pola wejściowego i przycisku, a następnie wywołamy funkcję „Statehandle" W "addEventListener„Metoda, w której ustawimy wartość niepełnosprawnego atrybutu do„FAŁSZ”Jeśli pole tekstowe jest puste, co oznacza przycisk Wyłącz; W przeciwnym razie ustawimy to jako „PRAWDA”, Jeśli pole wejściowe jest wypełnione dowolnym tekstem, a przycisk Prześlij zostanie włączony:

Let Input = Dokument.QuerySelelect („#Text”);
Niech przycisk = dokument.QuerySelelect („#oświadczenie”);
wejście.addEventListener („zmiana”, statehandle);
funkcja statehandle ()
if (dokument.querySelelector („#tekst”).wartość != "")
przycisk.niepełnosprawny = false;

w przeciwnym razie
przycisk.niepełnosprawne = true;

Wyjście

Przykład 4: Włącz przyciski wyłączone przyciski za pomocą JQuery
W tym przykładzie użyjemy JQuery, aby włączyć przycisk Wyłączonego Przesyłania. Aby to zrobić, najpierw ustaw wartość niepełnosprawnego atrybutu na „FAŁSZ”W celu wyłączenia przycisku, gdy pole wejściowe jest puste. Następnie, jeśli pole jest wypełnione dowolnym tekstem, ustaw wartość niepełnosprawnego atrybutu na „PRAWDA”, Który umożliwia przycisk Przesyłania:

$ (dokument).gotowy (funkcja ()
$ ('#Text').na („Wejście zmiany”, function ()
if ($ (this).val () != ")
$ („#prześlij”).prop („niepełnosprawny”, false);

w przeciwnym razie
$ („#prześlij”).prop („niepełnosprawny”, true);

);
);

Odpowiednie wyjście pokazano poniżej:

Omówiliśmy wszystkie aspekty przycisku włączania i wyłączania za pomocą JavaScript i JQuery.

Wniosek

W celu włączenia i wyłączania przycisku w JavaScript i JQuery możesz użyć „wyłączony" nieruchomość. Aby to zrobić, ustaw wartość atrybutu niepełnosprawnego „PRAWDA" Lub "FAŁSZ„Aby wyłączyć lub włączyć odpowiednio przycisk. W tym podręczniku wyjaśniliśmy metodę włączania i wyłączania przycisków za pomocą JavaScript i JQuery.