2009-02-19 4 views
6

Ich möchte Link-Schaltfläche deaktivieren, nachdem Sie darauf klicken & andere aktivieren. Toggle aktivieren/deaktivieren zwischen den beiden Link Tasten mit Hilfe von JavascriptIch möchte Link-Schaltfläche deaktivieren, nachdem Sie darauf klicken und andere aktivieren. toggle Aktivieren/Deaktivieren zwischen beiden Link-Schaltflächen mit Javascript

<a id="a1" href="page1.aspx">One</a><a id="a2" href="page2.aspx">Two</a> 
+0

@Yogini: Beginnen Sie eine Zeile mit 4 Leerzeichen und es wird als Code formatiert. – some

Antwort

1

Sie zugreifen können, und stellen Sie die "disabled" Attribut wie folgt aus:

if(somebutton.disabled == true){ 
    somebutton.disabled = false; 
} 

ich einen JavaScript-Frameworks wie jQuery empfehlen.

+4

Es gibt kein "deaktiviert" -Attribut für Links und dies funktioniert nicht. –

+0

Das Hinzufügen des Attributs "disabled" zu einem Link funktioniert zwar, aber nur für Internet Explorer. –

4

Einfach, fügen Sie einfach die onclick Ereignisse auf beiden Links Listener, die den fraglichen Link deaktivieren und aktivieren Sie den anderen.

So etwas wie

document.getElementById('a1').onclick = function() { 
    document.getElementById('a1').disabled = true; 
    document.getElementById('a2').disabled = false; 
}; 

document.getElementById('a2').onclick = function() { 
    document.getElementById('a2').disabled = true; 
    document.getElementById('a1').disabled = false; 
};

Natürlich, wenn Sie Sie diese auf mehrere Tasten dann könnten leicht abstrakt die oben herausRegistrierungsVerfahren gehen zu erstrecken, Schleifen über Anordnungen von Tasten usw. (möglicherweise diejenigen, die implementieren Sie eine bestimmte Klasse, anstatt das Array explizit anzugeben.

+0

können wir es mit jeder Eigenschaft oder CSS tun. – Yogini

1

Ihre Frage kann eines der folgenden 3 möglichen Szenarien haben. Wählen Sie, welches Problem auch immer auftritt.

Fall1) Ein Haken in Ihrer Frage ist, dass, da sie Links sind, die auf page1.aspx bzw. page2.aspx verweisen, sobald Sie auf einen Link klicken, wird eine neue Seite im Browser geladen. Also ist der Effekt, den Sie erreichen wollen, nicht wirklich wichtig.

Fall 2) Wenn Sie beide Links 'One' und 'Two' auf jeder aspx-Seite haben, dann können Sie auch die Deaktivierung der Verbindung, die auf sich selbst zeigt, fest codieren. (Oder auch nicht den Link überhaupt).

Fall 3) Wenn Sie einen Rahmen haben, um die Links 'One', 'Two' anzuzeigen und Sie einen anderen Rahmen haben, um den Inhalt beider Links zu laden, hat Ihre Frage eine Bedeutung, die den anderen Link deaktiviert. Hier ist der Code für das gleiche.

<html> 
<a id="a1" href="javascript:void(0)" onclick="toggle(objA1,objA2,'page1.aspx')">One</a> 
<a id="a2" href="javascript:void(0)" onclick="toggle(objA2,objA1,'page2.aspx')">Two</a> 
<br><iframe id="ifrm" src=""></iframe> 

<script> 
    var objA1 = document.getElementById('a1'); 
    var objA2 = document.getElementById('a2'); 

    // d=element to disable, e=element to enable 
    function toggle(d,e,link) 
    { 
     //if already disabled do nothing(don't follow url) 
     if(d.disabled) return; 

     //enable/disable 
     d.disabled = true; 
     d.style.cursor = 'default'; 
     e.disabled = false; 
     e.style.cursor = 'hand'; 

     //follow link 
     ifrm.src = link; 
    } 
</script> 
</html> 
2

Der einfachste Weg ist, um verstecken die Verbindung anstatt zu machen deaktiviert.

Sie können diesen Code verwenden, um den Link nach dem Klicken auszublenden.

Sein getesteter Code & es funktionierte perfekt für mich. es ist es :-)

<script type="text/javascript"> 
    onclick = function() { 
     var chk= document.getElementById('myElementId'); 
     chk.style.display="none"; 
    }; 
</script> 
0
<html> 
<head> 

<script type="text/javascript" src="jquery-1.4.2.min.js"></script> 

<style type="text/css"> 
    .submit{ 
     padding:8px; 
     border:1px solid blue; 
    } 
</style> 

</head> 

<body> 

<h1>Disabled submit form button after clicked with jQuery</h1> 

<form action="#"> 
    <p> 
     I'm a form ~ 
    </p> 
    <input type="submit" value="Submit"></input> 
     <button>Enable Submit Button</button> 
</form> 

<script type="text/javascript"> 

$('input:submit').click(function(){ 
    $('p').text("Form submiting.....").addClass('submit'); 
    $('input:submit').attr("disabled", true); 
}); 

$('button').click(function(){ 
    $('p').text("I'm a form ~").removeClass('submit'); 
    $('input:submit').attr("disabled", false); 
}); 

</script> 

</body> 
</html> 
0
<script type="text/javascript"> 
    function validateForm(formObj) { 
     if (formObj.username.value=='') { 
      alert('Please enter a username'); 
      return false; 
     } 
     formObj.submitButton.disabled = true; 
     formObj.submitButton.value = 'Please Wait...'; 
     return true; 
    } 
</script> 
<form name="frmTest" action="" method="post" onsubmit="return validateForm(this);"> 
    Username: <input type="text" name="username" value="" /><br /> 
    <input type="submit" name="submitButton" value="Submit" /> 
</form> ​​​​​​ 
+1

ist es ein Link, kein Knopf – stuartdotnet

1

Um einen Link, anstatt einen Knopf, das einzige, was zu deaktivieren Sie auseinander tun können, aus seinem Versteck zu setzen nicht überall zu gehen.

onclick="this.href='javascript: void(0)';" 
Verwandte Themen