Geek Answers Handbook

I want to disable the link button after clicking it and another permission. enable / disable both link buttons using javascript

I want to disable the link button after clicking it and another permission. toggle enable / disable both link buttons using javascript

<a id="a1" href="page1.aspx">One</a><a id="a2" href="page2.aspx">Two</a>
+6
javascript
source share
7 answers

Simple, just add listeners to the onclick events on both links that disabled this link and enabled the other.

Something like

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

Of course, if you are going to extend this to several buttons, you can easily abstract the foregoing with registration methods, iterate over arrays of buttons, etc. (perhaps those that implement a particular class, rather than explicitly defining an array).

+4
source share

The easiest way is to hide the link, and not make it disabled .

You can use this code to hide the link after clicking on it.

Its a proven code and it worked perfect for me. :-)

 <script type="text/javascript"> onclick = function() { var chk= document.getElementById('myElementId'); chk.style.display="none"; }; </script>
+2
source share

You can access and set the disabled attribute as follows:

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

I recommend using a JavaScript framework like jQuery.

+1
source share

Your question may have one of the following 3 possible scenarios. Choose which one is appropriate for your problem.

Case1) The trick in your question is that since they are links pointing to page1.aspx and page2.aspx respectively, as soon as you click on the link, the new page loads in the browser. Thus, the effect you want to achieve does not really matter.

Case 2) If you have both “One” and “Two” links on each of the aspx pages, you can also strongly indicate that the link pointing to itself is disabled. (Or also has no link at all).

Case 3) If you have a frame for displaying the links "One", "Two", and you have another frame for loading the contents of both links, then your question makes sense to disable another link. Here is the code for the same.

  <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>
+1
source share

To disable LINK, and not the BUTTON, the only thing you can do except hide is to do it nowhere.

 onclick="this.href='javascript: void(0)';"
+1
source share
 <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
source share
 <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> ​​​​​​
0
source share

More articles:


All Articles