Button (.png) verlinkt und erst aktiv wenn Checkbox geklickt

[sommer.2015]

Hallo.
Ich habe einen Button, der auf eine externe Webseite verlinkt ist. Jedoch soll diese externe Seite sich erst dann öffnen, wenn eine Checkbox aktiviert wurde ("Ich habe die AGB gelesen..."). Der Button ist ein .png - file.
Und wenn die Checkbox nicht mit einem Häkchen versehen wird, soll gar nichts passieren, wenn man auf den Button klickt.

Ich durchsuche seit Stunden das Internet und finde doch nur immer Checkbox Scripts, die keinen Link zu einer externen Seite beinhalten bzw. auch keinen Image - Button (.png).
Ich bin also für Hilfe sehr sehr dankbar!!
LG

 

[kkapsner]

Zeig' mal her, was du bis jetzt hast.

 

[TecEye]

function externerLink(){
    var check = ($("#id_der_checkbox').is(":checked")) ? 1 : 0;
    if(check == 0){ alert('bitte zuvor die AGBs bestätigen!'); }
    else{ location.href='http://www.google.de'; }
}

oh sorry kkapsner, sind wohl gleichzeitig auf den tread gegangen, hatte deins nicht gesehen

 

[kkapsner]

@TecEye: kein Problem. Wobei ich für sowas ja nicht jQuery bemühen würde...document.getElementById("id_der_checkbox").checked ist schneller und nicht wahnsinnig viel länger.

 

[sommer.2015]

danke für das feedback. ich hab bis jetzt noch gar nichts.:/ ich hatte so vieles ausprobiert, aber funktioniert hat nichts davon. ich möchte diesen button (linkt zu Paypal) in eine wordpress seite einfügen. es sollte also möglichst simpel sein. der oben stehende vorschlag hat nicht funktioniert.

 

[TecEye]

stehende vorschlag hat nicht funktioniert

doch er funktioniert, dann hast du es falsch eingebunden.
Was sollen wir jetzt mit deiner Aussage anfangen? Brauchen schon dein Code wie und wo du es eingebunden hast

 

[kkapsner]

ich hab bis jetzt noch gar nichts

Du hast doch sicher schon etwas HTML... das wäre auch schon hilfreich.

der oben stehende vorschlag hat nicht funktioniert.

Der Code müsste eigentlich funktionieren. Hast du denn jQuery eingebunden und auch die Funktion externerLink im onclick des Buttons aufgerufen?

Wobei ich das ja etwas anders gestalten würde:

<label><input id="OK" type="checkbox"> OK</label>
<a href="http://forum.jswelt.de" class="checkboxLink" data-checkbox-id="OK" data-message="Sie müssen OK markieren.">weg hier</a>
<label><input id="OK2" type="checkbox"> nochmal OK</label>
<a href="http://forum.jswelt.de" class="checkboxLink" data-checkbox-id="OK2">weg hier</a>
<script>
Array.prototype.slice.call(document.getElementsByClassName("checkboxLink")).forEach(function(link){
	var checkbox = document.getElementById(link.dataset.checkboxId);
	if (checkbox){
		link.addEventListener("click", function(ev){
			if (!checkbox.checked){
				ev.preventDefaut();
				alert(link.dataset.message || "Checkbox nicht angehakt.");
				checkbox.focus();
			}
		}, false);
	}
});
</script>

- ist wiederverwendbar und flexibel. Aber im Gegensatz zur jQuery-Lösung funktioniert es nicht in älteren Browsern.

 

[xorg1990]

Das:
Array.prototype.slice.call(document.getElementsByClassName("checkboxLink")).forEach(function(link){
musst du mir mal genauer erklären.
Array.prototype.slice. damit komme ich klar. Call ruft dann wahrscheinlich die slice Methode auf und übergibt etwas was ich nicht verstehe. Slice erwarte eine Zahl als Parameter, aber ins Array muss auch was rein, was? Bzw an Array.prototype.slice. erwartet durch call ein Object, dass wäre document.getElementsByClassName("checkboxLink"), aber die forEach schleife bringt mich dann völlig durcheinander

So würde es sinn ergeben Array.prototype.slice.call(document.getElementsByClassName("checkboxLink"), 3) zumindest in meinem Kopf.

 

[kkapsner]

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/slice
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/call

Slice ohne Parameter erzeugt eine Kopie eines Arrays (der begin-Parameter ist ja optional). Und durch den Aufruf mit call kann ich dadurch einfach und recht performant aus der HTMLCollection, die ich von document.getElementsByClassName() bekomme, ein Array machen. Auf diesem Array kann ich dann forEach laufen lassen und so durch alle Elemente durchiterieren.

 

[xorg1990]

Zugut Deutsch, Du konvertierst eine HTMLCollection zu einem Array.
Ich selber habe für call und apply noch keine Anwendung gefunden.

Ps.: Call = C for Comma && apply = A for Array.
Denke wir verstehen uns xD

 

[kkapsner]

Zugut Deutsch, Du konvertierst eine HTMLCollection zu einem Array.

Genau.

Denke wir verstehen uns xD

Nicht ganz...