Javascript/Jquery Checkbox bedingter Hyperlink

Ich habe einen Hyperlink/Bild-Taste, die Sie Javascript ein Formular einreichen verwendet,Javascript/Jquery Checkbox bedingter Hyperlink

<p> 
    <a href="#" onclick="checkOutFrm.submit();"> 
    <img src="images/btn-checkout-basket.gif" width="169" height="28" alt="Checkout" border="0" /> 
    </a> 
</p>

und möchte eine Checkbox hinzufügen, die den Hyperlink deaktivieren würde, bis es aktiviert ist. Wie würde ich das machen?

Jede Hilfe sehr geschätzt, S.

Quelle

2010-11-22 ss888

Sie können den Hyperlink nicht deaktivieren, obwohl Sie es verstecken. – Sarfraz

@Sarfraz: Sie können immer einen Link deaktivieren ... –

Sie sollten in der Regel nicht:

sie JavaScript in Ihren HTML-Markup-Mix (Sie sollte Ihre Logikhandler programmatisch anbinden),
(ab) verwenden Sie Anchor-Elemente nur für JavaScript (Sie sollten Vorlage Handler einen Knopf, oder setzen Sie den onclick Handler auf dem img direkt) noch
Stelle eines Formulars auf dem Klick eines einzelnen Elements (Sie sollten stattdessen übernehmen die onsubmit-Ereignis des Formulars) verwenden.

ich weiß nicht, die Besonderheiten Ihrer Situation, aber ich würde diese Datei in Ihrem HTML tun:

<!-- Put a valid doctype here --> 
<html><head> 
    <script type="text/javascript" src="submit.js"></script> 
</head><body> 
    <form id="myform" ...> 
    <label> 
     <input type="checkbox" name="accept" id="accept-box" /> 
     I accept 
    </label> 
    <button type="submit" id="submitter" disabled="disabled"> 
     <img src="..." /> 
    </button> 
    </form> 
</body></html>

... und dies in Ihrer submit.js Datei:

window.onload = function(){ 
    var accept = document.getElementById('accept-box'); 
    var submit = document.getElementById('submitter'); 
    accept.onclick=function(){ 
    submit.disabled = !accept.checked; 
    }; 
    document.getElementById('myform').onsubmit = function(){ 
    // Prevent form submission by any means unless 
    // the accept button is checked. 
    return accept.checked; 
    }; 
};

(Nun, eigentlich würde ich persönlich jQuery für die Handhabung der JS Seite der Dinge verwenden :)

$(function(){ 
    $('#accept-box').click(function(){ 
    $('#submitter').attr('disabled',!this.checked); 
    }); 
    $('#myform').submit(function(){ 
    return $('#accept-box').attr('checked'); 
    }); 
});

CSS können Sie die Taste rund um das Bild stylen weg, wenn man so will:

#submitter { border:0; padding:0 }

Quelle

2010-11-22 14:02:19 Phrogz

das ist brilliant, viele, viele, vielen dank, S – ss888

Sie JQuery Validator http://bassistance.de/jquery-plugins/jquery-plugin-validation/ können es zu erzwingen.

Quelle

2010-11-22 13:34:06 Itamar

vielen Dank, s. – ss888

Bevor Sie Daten senden, können Sie den Wert des Kontrollkästchens zuerst prüfen.

<a href="javascript: if(getElementById('CheckBoxID').checked) { checkOutFrm.submit(); } else { return false; }">

Wenn Sie jQuery verwenden Sie lieber es auf diese Weise tun:

$(function(){ 
    $("a").click(function(e){ 
     e.preventDefault(); 
     $("#CheckBoxID").val() && $("form").submit(); 
    }); 
});

Quelle

2010-11-22 13:36:03

vielen Dank, aber ich konnte es nicht zur Arbeit bringen und endete damit, Phrogz 'Rat zu benutzen. Danke trotzdem, S. – ss888

Dieser Code ist vielleicht nicht 100% richtig, aber er sollte dich trotzdem in die richtige Richtung weisen. –

Javascript/Jquery Checkbox bedingter Hyperlink

Antwort

Verwandte Themen