2009-02-19 4 views
6

Je veux désactiver le bouton après avoir cliqué sur de celui-ci & autres activer. activer bascule/désactiver entre les deux boutons de lien en utilisant javascriptJe veux désactiver le bouton de liaison après avoir cliqué dessus et activé autre. activer bascule/désactiver entre les deux boutons de lien en utilisant javascript

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

@Yogini: Commence une ligne avec 4 espaces et il sera formaté comme du code. – some

Répondre

1

Vous pouvez accéder et définir l'attribut « désactivé » comme ceci:

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

Je recommande d'utiliser un framework JavaScript comme jQuery.

+4

Il n'y a pas l'attribut « désactivé » pour les liens et cela ne fonctionne pas. –

+0

Plus précisément l'ajout d'attribut « désactivé » à un lien fonctionnera, mais uniquement pour Internet Explorer. –

4

Simple, il suffit d'ajouter des écouteurs aux événements onclick sur les liens, qui désactivent le lien en question et permettre à l'autre.

Quelque chose comme

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; 
};

Bien sûr, si vous allez être étendre ce à plusieurs boutons alors vous pourriez facilement abstraite ci-dessus sur les méthodes d'enregistrement, sur les tableaux de boucle boutons etc. (peut-être ceux qui implémenter une classe particulière plutôt que de spécifier explicitement le tableau).

+0

pouvons-nous le faire en utilisant n'importe quelle propriété ou css. – Yogini

1

Votre question peut avoir une des trois scénarios possibles suivant. Choisissez les suites de votre problème. Case1) Une capture dans votre question est que ce sont des liens pointant vers page1.aspx et page2.aspx respectivement une fois que vous cliquez sur un lien qu'une nouvelle page charge dans le navigateur. Donc l'effet que vous voulez obtenir n'a pas vraiment d'importance. Cas 2) Si vous avez les deux liens 'One' et 'Two' sur chacune des pages aspx, vous pouvez également coder en dur la désactivation du lien pointant sur lui-même. (Ou bien ne pas avoir le lien du tout). Cas 3) Si vous avez un cadre pour afficher les liens 'Un', 'Deux' et que vous avez un autre cadre pour charger le contenu des deux liens alors votre question a une signification désactivant l'autre lien. Voici le code pour le même.

<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

La façon la plus simple est de cacher le lien plutôt que de le rendre désactivé.

Vous pouvez utiliser ce code pour masquer le lien après-cliquez dessus.

Son code testé & a fonctionné parfaitement pour moi. :-)

<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

c'est un lien pas un bouton – stuartdotnet

1

Pour désactiver un LINK plutôt que sur un bouton, la seule chose que vous pouvez faire à part de se cacher, il est de la régler de ne pas aller nulle part.

onclick="this.href='javascript: void(0)';" 
Questions connexes