Hur man aktiverar ett element med jQuery och JavaScript. jQuery - ställ in attributvärde

Twitter

Ibland behöver du göra ett textfält, alternativknapp eller kryssruta aktiv eller inaktiv. Hur gör man det dynamiskt utan att ladda om sidan? Du kan använda JavaScript och jQuery prop för detta. HTML-elementet aktiveras genom att sätta egenskapen disabled till true.

Med jQuery kan du välja det element som ska aktiveras eller stängas av och ändra den egenskapen med funktionerna prop() eller attr(), beroende på vilken version av jQuery som används.

Funktionen prop() lades till i jQuery 1.6 och är standardmetoden för att arbeta med egenskaper. Och attr()-funktionen gör samma sak i jQuery 1.5 och nedan.

Det är också möjligt att aktivera eller inaktivera alla HTML - element med JavaScript . Allt du behöver göra är att hitta elementet efter id och ställa in dess disabled-egenskap till true eller false.

Hur man gör en textruta aktiv/inaktiv med JavaScript

Det här exemplet har ett HTML-formulär, textfält och ett par knappar för att göra textfältet aktivt eller inaktivt. Jag använder vanligt JavaScript här, utan att jQuery-propet är markerat.

Stegen kommer att vara:

Använd funktionerna enable() och disable() med knappar för att aktivera eller inaktivera ett textfält.
Använd getElementById() för att komma åt textfältet.
Ställ in det inaktiverade fältet till sant eller falskt.

Här är ett exempel på en HTML-fil med en JavaScript-baserad lösning:

Hur man aktiverar eller inaktiverar inmatning med JavaScript

Aktivera och inaktivera inmatning med JavaScript

När du klickar på knappen " Inaktivera textfält» funktionen disable() anropas ( blanda inte ihop med jQuery prop inaktiverad), och egenskapen disabled i textfältet är satt till true. Därför kan du inte längre skriva in text i detta fält, det är inte aktivt. I det här fallet kan du återaktivera textfältet genom att klicka på knappen " Aktivera textfält". Den kommer att anropa funktionen enable(), som återställer egenskapen disabled till false .

Hur aktiverar/inaktiverar man ett textfält med jQuery?

Nedan finns jQuery-baserad kod som gör samma sak. I det här exemplet har vi använt funktionen prop(). Om du använder jQuery version 1.5 eller äldre, ersätt prop() med attr() .

Precis som i föregående exempel har vi två knappar btn_enable och btn_disable för att aktivera och inaktivera textfältet. Låt oss koppla upp händelsehanteraren med funktionen click(), som anropas när sidan laddas.

I händelsehanteraren lokaliserar vi textfältet med hjälp av jQuerys ID-väljare, såsom $("#name") och anropar sedan prop("disabled", false") för att inaktivera det textfältet.
När användaren klickar på aktiveringsknappen ställer vi in egenskapen disabled till true genom att anropa jQuery prop("disabled" , true ). Detta kommer att återaktivera textfältet. Kom ihåg att du inte kan skriva in text i ett avaktiverat fält.

Hur man aktiverar eller inaktiverar en textruta med jQuery

Slå på och av ett textfält med jQuery

Du kan testa detta genom att köra exemplet i din webbläsare. Ring bara inte removeProp() för att återaktivera knappen. Det kommer att ta bort " Inaktiverad” från textfältet, så att du inte kan stänga av den igen i framtiden. Använd istället den inaktiverade metoden jQuery prop.

Här är en skärmdump av hur sidan skulle se ut i en webbläsare som Edge eller Chrome.

I det här exemplet inaktiverade vi textfältet och återaktiverade det. Du kan använda JavaScript eller jQuery för detta.

Översättning av artikeln " Hur aktiverar/inaktiverar man ett element med jQuery och JavaScript? exempel” förbereddes av ett trevligt projektteam.

Bra dålig

Jag har följande HTML-kod med två element med samma namn

Genom JQuery vill jag ställa in kryssrutan aktivera. Så jag använder något sånt här:

$("#chk0").attr("inaktiverad",false);

Men det går inte. Jag antar att JQuery blir förvirrad med två element med samma namn. Tyvärr kan jag inte undvika att använda två olika namn, för när formuläret är upplagt vill jag att alla kryssrutor ska postas (inte bara de som har markerats). Därför måste jag använda ett dolt element med samma namn. Så, tillbaka till frågan, hur kan jag aktivera kryssrutan via JQuery i skriptet ovan? Finns det en "typ"-parameter för attr som separeras från kryssrutan?

6 svar

Vissa saker före själva koden.

hashen (#) du använder som väljare är för ID, inte elementnamn. inte heller är attributet disabled ett sant falskt scenario.. om det inaktiverade attributet betyder det att det är sant.. du måste ta bort attributet och inte ställa in det på false. Det finns också formulärväljare som identifierar specifika typer av element i ett formulär.

så blir koden

$("input:checkbox").removeAttr("inaktiverad");

Att uppdatera svaret

Du måste använda metoden .prop() (tillagd efter v1.6)

$("input:checkbox").prop("inaktiverad", false); // för att aktivera kryssrutan

$("input:checkbox").prop("inaktiverad", true); // för att avaktivera kryssrutan

Seriöst, använd bara inte jQuery för detta. disabled är en boolesk egenskap hos formulärelement som har fungerat bra i alla större webbläsare sedan 1997, och det finns inget sätt att det är lättare eller mer intuitivt att ändra om ett formulärelement är inaktiverat.

OCH JavaScript-sträng för att aktivera den här kryssrutan:

Document.getElementById("chk0_checkbox").disabled = false;

Om du föredrar det kan du använda jQuery istället för att markera rutan:

$("#chk0_checkbox").disabled = false;

"True" och "False" fungerar inte, inaktivera, inställt på "inaktiverad".

$(".someElement").attr("inaktiverad", "inaktiverad");

Ta bort för att aktivera.

$(".someElement").removeAttr("inaktiverad");

Oroa dig inte heller för att välja flera element, jQuery kommer att fungera på alla som matchar. Om du bara behöver en kan du använda många saker: första, sista, n:a osv.

Du använder namn, inte id som det andra nämnt - kom ihåg att om du använder id valid xhtml är det nödvändigt att id:n är unika.

Animation ser tilltalande ut för ögat, men att skapa animation är inte ett lätt jobb. Det är viktigt att ta hänsyn till effekten som animationer kan ha på prestanda, eftersom även de coolaste animationerna kan ha negativa effekter och försämra användarupplevelsen. Lyckligtvis har jQuery några inbyggda metoder för att implementera enkla animationer med lätthet. Dessa metoder är namngivna på ett sådant sätt att de är tydligt märkta för deras användning och funktionalitet. I det här korta inlägget kommer vi att titta på var och en av dessa metoder i praktiken. Dessa animeringsmetoder har en sak gemensamt - accepterade parametrar. Följande 3 parametrar är tillämpliga för alla metoder:

Varaktighet: valfri parameter. Antingen sträng- eller nummerspecifikationer kan användas för att bestämma hur lång tid som ges för animeringen att slutföra. Standardvärdet är 400 millisekunder. Den accepterar också "långsamma" eller "snabba" strängvärden där "snabb" indikerar varaktighet på 200 millisekunder och "långsam" indikerar 600 millisekunder.
Lättnad: valfritt. Easing indikerar animeringens hastighet vid olika punkter under animeringen. jQuery tillhandahåller inbyggda swing- och linjära lättnadsfunktioner för att hjälpa dig att spela med den här parametern.
återuppringning: Valfritt. En funktion som kan köras efter att animeringen är klar.

fadeIn()

Metoden fadeIn() ändrar gradvis opaciteten för det valda elementet från dold till synlig. Det ändrar opacitetsvärdet från 0 till 1. Det fungerar inte på dolda objekt. För att använda denna metod

$("#elm").fadeIn("snabb");
$("#elm").fadeIn(1000); // 1 sekund

tona ut()

Som du kanske har gissat är detta motsatsen till fadeIn(). Denna metod ändrar gradvis opaciteten för det valda elementet från synligt till doldt. Den ändrar opacitetsvärdet från 1 till 0. När opaciteten når 0 är egenskapen jQuery set display inställd på none. Så här använder du den här metoden:

$("#elm").fadeOut("slow");
$("#elm").fadeIn(2000); // 2 sekunder

fadeTo()

Metoden fadeTo() liknar metoden fadeIn() men den ger möjlighet att styra elementets opacitet. Du kan ange opacitetsvärdet, som visas här:

$("#elm").fadeTo("slow", 0,3); //Opacitetsvärdet är 0,3

Ovanstående kod ändrar elementets opacitet gradvis till 0,3.

fadeToggle()

Denna metod är en kombination av fadeIn() och fadeout(). Om elementen tonas ut kommer fadeToggle() att tona in dem och när elementen tonas in kommer fadeToggle() att tona ut dem. Så här:

$("#elm").fadeToogle("slow");
$("#elm").fadeToggle("slow", function()(
console.log("FadeToggle är klar!");
});

glid upp()

Metoden slideUp() drar upp det markerade elementet för att dölja det. Denna metod styr internt höjden på elementet. När höjden når 0, ställer den in visningsegenskapen till ingen för att dölja den. För att implementera det, använd följande kod:

$("#elm").slideUp(); //Använder standardvärdet på 400 millisekunder för varaktighet.
$("#elm").slideUp(500);

glida ner()

Denna metod fungerar motsatsen till slideUp()-funktionen. Den glider ner det valda elementet för att visa det. Denna metod ändrar höjden på de matchade elementen från 0 till den angivna maximala höjden. Sålunda ger det elementet en glidande effekt. För att implementera det, använd följande kod:

$("#elm").slideDown(); //Använder standardvärdet på 400 millisekunder för varaktighet.
$("#elm").slideDown(1000);

slideToggle()

Denna metod är en kombination av slideUp() och slideDown(). Internt använder denna metod också egenskapen display style. När du glider uppåt, när höjden på elementet når 0, ställs egenskapen visningsstil till "ingen". När du glider nedåt ställer den in "inline"-värdet för visningsegenskapen. Baserat på värdet på visningsegenskapen avgör den om den ska glida upp eller ner. För att implementera det:

$("#elm").slideToggle("slow", function() (
console.log("Animeringen klar.");
});

Bonustips: Om du vill inaktivera all animering, ställ in egenskapen jQuery.fx.off till 'true'. Detta är ganska användbart när din jQuery-kod använder animering mycket och du måste inaktivera den. Istället för att besöka varje enskild rad och ändra den, är det bättre att använda den här egenskapen för att inaktivera animering helt.

Slutsats

Det här inlägget talar kortfattat om olika inbyggda animeringsmetoder tillgängliga i jQuery. Dessa metoder kan utföra animationer som att blekna och glida i båda riktningarna. Dessa metoder accepterar också varaktighet för att styra hastigheten på din animering. De är enkla att använda och låter dig implementera enkel animering med knappt någon ansträngning. Ha kul att leka med dem!

Steps är ett enkelt, lätt och lätt att konfigurera jQuery-plugin som låter dig skapa en stegguide från alla grupperade element. Denna plugin är enkel att använda och den är bara beroende av jQuery-biblioteket. Den kommer med olika alternativ för att anpassa guiden. Du kan:

Ställ in startnumret som startar guiden vid ett specifikt stegnummer
Implementera "showBackButton", som indikerar om bakåtknappen kommer att vara synlig eller inte - ganska användbart om du vill begränsa dina användare från att gå tillbaka till föregående steg
Implementera "visa/dölj" sidfotsknappar – när sidfotsknappar inte är synliga kan användaren flytta fram och tillbaka genom att klicka på stegnummerknapparna

2. formToWizard

FormToWizard är ett jQuery-plugin som låter dig förvandla vilket webbformulär som helst till en flerstegsguide med hjälp av jQuery-biblioteket. För att bestämma antalet inblandade steg, väljer denna plugin först alla fältuppsättningar och väljer storleken på denna inpackade uppsättning. Därefter itererar den genom den här raderade uppsättningen (som returnerade alla fältuppsättningar), lindar varje fältuppsättning till en div och lägger till ett stycke som håller "bakåt" och "nästa"-knapparna. Du kan också anpassa namnet på föregående och nästa knapp.

3.SmartWizard

http://techlaboratory.net/smartwizard

SmartWizard är en flexibel och kraftigt anpassningsbar jQuery step wizard plugin med Bootstrap-stöd. Det är enkelt att implementera och ger ett snyggt och stilrent gränssnitt för dina formulär, kassaskärm, registreringssteg mm. Det finns många funktioner utöver det inbyggda Bootstrap-stödet, inklusive:

Responsiva teman
anpassningsbara verktygsfält
URL-navigering och stegval
anpassningsbara alternativ,
offentliga metoder,
evenemangsstöd,
tangentbordsnavigering,
Flera guideinstanser på samma sida

En bra sak med SmartWizard är att författaren till detta plugin regelbundet uppdaterar plugin baserat på användarens feedback. Baserat på användarens feedback har den senaste versionen 4.0 skrivits om helt från början, vilket gör den mer kraftfull, robust, skalbar och anpassningsbar.

4. Material Bootstrap Wizard

https://github.com/creativetimofficial/material-bootstrap-wizard

Material Bootstrap Wizard är ett jQuery-plugin som är en fullt lyhörd guide, inspirerad av den berömda Googles Material Design. Det är ett av de praktiska elementen som kan användas i ett projekt. Material Bootstrap Wizard bryter det långa html-formulär i bitar och låter användaren se det ett steg i taget. På så sätt behöver användaren bara fokusera på det aktuella steget utan att bli överväldigad. De kommer dock att kunna se hur många steg de har kvar, så de kan bedöma ungefär hur lång processen kommer att ta.

5.Wizard.js

https://github.com/jeffreypolk/bootstrap-wizard

Wizard.js är ett plugin för jQuery step wizard som använder bootstraps modala komponent för att visa vilken typ av innehåll som helst i en steg-för-steg-guide. Den tar hand om rören för att flytta fram och tillbaka mellan stegen, validering, krokar för nyckelhändelser etc. Guiden är beroende av strukturerad HTML för att definiera guiden och stegen för den. Varje steg i en guide kan valideras innan du går vidare till nästa steg med hjälp av formulärvalidering eller anpassad validering.

6. Stegform

https://github.com/masade/stepform
StepForm är ett enkelt och lätt jQuery-plugin som konverterar vilken form som helst till en glidande form av steg-för-steg-guide. Det är ett idealiskt val för att skapa registreringsformulär. Den utför också valideringen med hjälp av ett datavalidate-attribut och så att användaren kan gå till nästa steg först efter att eventuella fel på inmatningar på den aktuella bilden har validerats. Det stöder också tangentbordsinteraktioner med hjälp av enter- och tab-tangenterna för att gå till nästa steg eller till nästa fält.

7.jQuery-steg

https://github.com/rstaib/jquery-steps

jQuery Steps är en smart UI-komponent som låter dig enkelt skapa guideliknande gränssnitt. Denna plugin grupperar innehåll i sektioner för en mer strukturerad och ordnad sidvy. Dessutom är det så enkelt som 1-2-3 att lägga till plugins som jQuery Validation som kan förhindra stegändring eller inlämning. Den stöder:

HTML5-stöd

Tillgänglighetsstöd

Statlig uthållighet

Formulärvalidering med valfritt val av valideringsplugin

Coola övergångseffekter

Enkel navigering

tangentbordsnavigering

Flera guider på samma sida

Den är väldigt lätt (endast 2,9KB minifierad) och fungerar med alla moderna webbläsare.

Hämtar eller ändrar egenskapsvärdet för de valda sidelementen (skillnad och relation mellan attribut och egenskaper). Funktionen har fyra användningsfall:

returnerar värdet på attributet propName på det valda elementet. Om flera element väljs kommer värdet att tas från det första. Metoden returnerar odefinierad om den angivna egenskapen inte är inställd på det första av de markerade elementen eller om uppsättningen av valda element är tom.

i alla valda element, egenskap propName kommer att anta betydelsen värde.

i alla valda element kommer värdena för egenskapsgruppen att ändras propName1, propName2, ... gör dem lika värde1, värde2, ... respektive.

fast egendom propName värdet som returneras av den anpassade funktionen kommer att tilldelas (om det inte returnerar något, ändrar egenskapen helt enkelt inte sitt värde). Funktionen anropas separat för vart och ett av de valda elementen. När den anropas skickas följande parametrar till den: indexär elementets position i uppsättningen, värde- fastighetens nuvarande värde propName vid elementet.

Exempel på användning:

Anmärkning 1: Det är viktigt att notera att med metoden .prop(name) får du bara egenskapsvärdena för det första elementet av alla valda. Om du behöver värdena för alla element, bör du använda konstruktioner som .map() eller .each() .

Anmärkning 2: i IE före 9, använd prop för att ställa in andra värden än enkla typer(nummer, sträng, boolean) resulterar i en minnesläcka om den här egenskapen inte tas bort (med .removeProp()) innan detta element tas bort från DOM. För att ställa in din egen data till DOM-objekt är det därför bättre att använda .data() .

Anmärkning 3: Använd inte .removeProp() som motsvarighet till att ställa in en egenskap på false . Genom att ta bort en inbyggd (native, skapad av programmet, inte av användaren) egenskap från DOM-objektet kommer du inte att kunna returnera den senare.

Prop() är användbart för att arbeta med attribut som inte kräver ett värde (markerat och inaktiverat på indataelement), i de flesta andra fall är .attr() bättre för att arbeta med attribut.

I aktion

Låt oss göra alla kryssrutor inaktiva:

~lt~!DOCTYPE html~gt~ ~lt~html~gt~ ~lt~head~gt~ ~lt~style~gt~ img(padding:10px;) div(färg:röd; font-size:24px;) ~lt~/style~gt~ ~lt~script src="http://code.jquery.com/jquery-latest.js"~gt~~lt~/script~gt~ ~lt~/head~gt~ ~lt~body~gt~ ~lt~input type="checkbox" markerad /~gt~ ~lt~input type="checkbox" /~gt~ ~lt~input type="checkbox" /~gt~ ~lt~ input type="checkbox" markerad /~gt~ ~lt~script~gt~ $("input").prop((disabled: true )); ~lt~/script~gt~ ~lt~/body~gt~ ~lt~/html~gt~

Länkar

Lista över alla funktioner för att manipulera sidelement

Söknycklar:

egenskaper hos element på sidan
fastighetsvärde
få fastighetsvärde
ändra fastighetsvärde
ange fastighetsvärde
tilldela ett värde till en fastighet
.stötta()
stötta()