CIO Tech Eksperten IT-JOB IT-Kurser Events Podcast Søg

Log ind eller opret profil

Du kan også logge ind via nedenstående tjenester

ssv Nybegynder

17. marts 2009 - 21:30 Der er 8 kommentarer og
1 løsning

Skift class på a-tag hvis checkbox er checked

Hello.

Jeg er ved at lave en signup side til en kunde, og jeg har et lille javascript-problem.

I bunden af sign up'en er der nogle betingelser der skal accepteres før brugeren kan gå videre. Jeg vil så have at når checkbox'en med link til betingelserne er checked, så skal a tag'et (det der submitter formen i stedet for en submit button) skifte class.

Pointen i det er at a tag'et skal være "dæmmet" og ikke kan bruges før betingelserne er accepteret. Derfor skal a tag'et have en ny class når checkboxen er checked og derved se anderledes ud.

Hvis i har en anden måde at løse det på, er jeg lutter øren :-)
En test-side kan ses her: http://www.proads.dk/simon/test_submit.html

Synes godt om

webcreator Nybegynder

17. marts 2009 - 21:42 #1

Hej.

Jeg vil anbefale dig at ændre på style properties via DOM'en. Der er flere browsere på markedet, som ikke understøtter dynamisk udskiftning af CSS klasser.

Hvis du fx vil ændre tekstfarven, kan det gøres således:

<a id="LinkID" href="http://google.com>Google</a>
document.getElementById("LinkID").style.color = "#808080"

Synes godt om

webcreator Nybegynder

17. marts 2009 - 21:43 #2

Ups - der mangler lige et citationstegn efter google.com

Synes godt om

ssv Nybegynder

18. marts 2009 - 10:56 #3

Jeg tror måske ikke jeg har været klar nok i min beskrivelse så.

Meningen i det er at brugeren ikke kan gå videre i signup'en før betingelserne er krydset af. Indtil da skal man ikke kunne trykke på knappen og den skal være dæmmet. Er det nemmere at lave det som en button og så disable den? Det mest optimale ville være et a-tag, da det er 100 gange nemmere at style.

Når så brugeren har krydset betingelserne af, skal brugeren kunne komme videre i signup'en og a-tag'et skal have en anden mere "klar" farve.

Synes godt om

ssv Nybegynder

18. marts 2009 - 11:20 #4

Jeg har fundet dette, måske kan det hjælpe med at illustrere hvad jeg ønsker. Det eneste der mangler er at knappen skal skifte class alt efter om den er disabled eller ej. Ville det være helt forkert at løse det med følgende kode?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Titel</title>
<style type="text/css">
.submit { background: #f00; width: 150px; height: 50px; border: 0; padding: 0; margin: 0; cursor: pointer }
.wait { background: #ccc; width: 150px; height: 50px; border: 0; padding: 0; margin: 0; cursor: pointer }
</style>
</head>

<body>
<form name="checkit" action="" method="post">
<input type="checkbox" onClick="document.checkit['mysubmit'].disabled =(document.checkit['mysubmit'].disabled)? false : true">
<input type="submit" id="mysubmit" name="mysubmit" class="wait" disabled value="">
</form>
</body>
</html>

Synes godt om

chrisbuchholz Nybegynder

18. marts 2009 - 11:30 #5

Det ser meget rigtigt ud, ssv. Du skal dog huske på at du ikke kan bruge disabled-attributen på et a-tag.

Synes godt om

ssv Nybegynder

18. marts 2009 - 13:19 #6

Det er jeg klar over, og derfor eksempelt er med en button. :-)

Det kunne være der var en måde at disable "klik-funktionen" på et a-tag og så aktivere den efterfølgende. Men eksemplet med en button kan også sagtens fungere.

Har du et tip til hvordan koden kan se ud når den submit button skal skifte class alt efter om checkbox'en er disabled eller ej?

Synes godt om

chrisbuchholz Nybegynder

18. marts 2009 - 13:29 #7

Med a-tag:

Først der smider du en click-event på a-tagget der indeholder "return false;", og når checkbox'n så bliver checked, så fjerner du denne click-event. Du skal dog være opmærksom på, at der også skal holdes øje med, om checkbox'n bliver unchecked igen, for så skal click-eventen naturligvis smides på a-tagget igen.

Med input-tag af typen submit:

Du tjekker som før om checkbox'n er checked eller unchecked, og hvis den er checked så sætter du disabled-attributten på input[submit]-tagget til at være false, og hvis den ikke er, sætter du den til true.

Du har forresten et ret godt udgangspunkt i det kode du har pastet tidligere, så det bør du gå ud fra.
Hvis du prøver at lave et udkast af hvad end du vælger for en metode at bruge, og du ikke kan få det til at virke, så vil jeg gerne hjælpe dig med at fikse din kode, men jeg vil ikke skrive den for dig, så det kræver at du først selv gør en indsats og prøver dig lidt frem.

Synes godt om

olebole Juniormester

18. marts 2009 - 13:39 #8

<ole>

Læg mærke til trådens allerførste sætning:
"Jeg vil anbefale dig at ændre på style properties via DOM'en."

Dynamisk skift af CSS-klasse er sjældent en særlig god idé, da man let tvinger browseren ud i en komplet genberegning af hele dokumentets CSS ved hvert klasseskift. Derfor fraråder MS direkte fremgangsmåden.

Er der tale om flere/mange style properties, der skal skiftes, kan du gøre det med fremgangsmåden i slutningen af denne artikel:
http://www.eksperten.dk/guide/227

/mvh
</bole>

Synes godt om

ssv Nybegynder

11. oktober 2010 - 19:25 #9

Lukker...

Synes godt om

Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Følg dette spørgsmål

Opret Preview

Webudvikling kurser

Vi tilbyder markedets bedste kurser inden for webudvikling

Se alle Webudvikling kurser

Flere spørgsmål fra JavaScript kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
Returner ikke alt Af ingeman i JavaScript	13	26/06/202414:40	01/07/202417:00
Vis og skjul sektioner - virker kun på den første sektion Af nemlig i JavaScript	4	24/06/202422:50	26/06/202420:33
Hente og gemme Cookies like this. Af DanishBear i JavaScript	6	04/06/202416:23	05/06/202414:23
Ajax - indlæs webside og derefter hente data Af nemlig i JavaScript	4	21/05/202417:19	22/06/202422:07
Disable button efter 1. klik Af nemlig i JavaScript	2	05/05/202415:37	05/05/202416:25

Se alle spørgsmål i kategorien Opret spørgsmål

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten

Seneste artiklerRSS