CODEWITHSUNDEEP
javascriptjqueryhtml
Karthik Raj
Karthik Raj

Reputation: 189

disable href after 1 click on html?

I want the href to be disabled after 1 click, can it be done using javascript or jquery?

Please help.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns ="http://www.w3.org 1999 xhtml" xml :lang="en">
  <head>
    <style>

     a:link{
       color:#1DAAA1;
     }

     a:visited{
       color:green;
     }

     a:hover{
       background: #ff0000;
       color: #FFF;
     }

    </style>
  </head>
  <body>
    <table width="500" align="center" border="5px solid">
      <tr align="center" >
        <td><a href="http://www.google.com.my/" onclick="return false"> Google </a></td>
        <td><a href="http://www.yahoo.com/"> Yahoo </a></td>
        <td><a href="http://www.bing.com/"> Bing </a></td>
        <td><a href="http://en.wikipedia.org/wiki/Main_Page"> Wikipedia </a></td>
        <td><a href="https://www.facebook.com/"> Facebook </a></td>                         
     </tr>
    </table>
  </body>
</html>

Upvotes: 15

Views: 58745

Answers (11)

John B
John B

Reputation: 20400

Here is a vanilla JS approach.

You can simply drop in this code and add the js-click-once class to your links/buttons. It also adds a disabled class to the link/button.

document.querySelectorAll(".js-click-once").forEach(function (el) {
    el.addEventListener("click", function (e) {
        if (el.classList.contains('disabled')) {
            el.setAttribute("disabled", "disabled");
            e.preventDefault();
            return false;
        }

        el.classList.add("disabled");
    });
});

Upvotes: 0

ANTONIO FERREIRA
ANTONIO FERREIRA

Reputation: 1

I want to leave here an example that works with Knockout.js that I used with IFrame, but as IFrame doesnt work with local files, I made this example with divs. When you click the link, the function is called, as you can see with the alert()commented inside, but when you dial something in the input dialog and click again the link, the div is not updated by the Knockout.js, only if you click the other link that calls the same function but with diferent parameter.

<html>
    <head>
        <script type="text/javascript" src="http://knockoutjs.com/downloads/knockout-3.2.0.js"></script>
    </head>
    <body>
        <div>
            <a href="javascript:fAlter(2)">Page 2</a>
        </div>
        <div>
            <a href="javascript:fAlter(3)">Page 3</a>
        </div>
        <div data-bind="bindHTML: dados"></div>
        <script type="text/javascript">
           function myPage2(nPage) {
               var cPage = '<div>Pagina 2</div>';
               if (nPage == 3) { cPage = '<div>Pagina 3</div>' }
               cPage += '<input type="text" id="fname" name="fname">';
               //alert('clicked!');
               return cPage
           }
           var viewModel =  {
                dados : ko.observable()
           }
           ko.bindingHandlers.bindHTML = {
                init: function () {
                     // Prevent binding on the dynamically-injected HTML (as developers are unlikely to expect that, and it has security implications)
                     return { 'controlsDescendantBindings': true };
           },
                update: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
                     // setHtml will unwrap the value if needed
                     ko.utils.setHtml(element, valueAccessor());
                     var elementsToAdd = element.children;
                     for (var i = 0; i < elementsToAdd.length; i++) {
                          ko.cleanNode(elementsToAdd[i]); //Clean node from Knockout bindings
                          ko.applyBindings(bindingContext, elementsToAdd[i]);
                     }
                }
           };
           ko.applyBindings(viewModel);
           viewModel.dados(myPage2(2));
           function fAlter(nPage) {
               viewModel.dados(myPage2(nPage));
           }
       </script>
    </body>
</html>

Upvotes: 0

Mr. Napik
Mr. Napik

Reputation: 5687

Pure JavaScript solution to allow user to follow the URL only once: 

<a id="elementId" 
   href="www.example.com" 
   onclick="setTimeout(function(){document.getElementById('elementId').removeAttribute('href');}, 1);"
   >Clik and forget</a>

Once clicked, this will remove the href attribute (with 1 ms wait to allow the original action to start) making the link silent. Similar as suggested by Dineshkani, but the original answer caused action to not to start at all on some browsers.

Upvotes: 4

vmihaylov76
vmihaylov76

Reputation: 824

Pure javascript solution:

<script> 
   function clickAndDisable(link) {
     // disable subsequent clicks
     link.onclick = function(event) {
        event.preventDefault();
     }
   }   
</script>
<a href="target.html" onclick="clickAndDisable(this);">Click here</a>

Upvotes: 68

Omar N Shamali
Omar N Shamali

Reputation: 773

duplicate the same div in html and css, the duplicated one must be below the original one using: z-index=-1 or/and position:absolute.

make the original div onclick="HideMe(this)"

JS:
<script type="text/javascript">
function HideMe(element){
element.style.display='none';
}
</script>

it might be not the best way, but 100% goal achievable.

Upvotes: 0

Dmytro
Dmytro

Reputation: 5701

This is simpler approach using jQuery that prevents links double clicking: no onclick attributes, id isn't required, no href removing.

$("a").click(function (event) {
    if ($(this).hasClass("disabled")) {
        event.preventDefault();
    }
    $(this).addClass("disabled");
});

Tip: you can use any selector (like button, input[type='submit'], etc.) and it will work.

Upvotes: 8

germankiwi
germankiwi

Reputation: 1132

Based on Ayyappan Sekar's answer, I have just done something very similar using jQuery:

$('#yourId').click(function (e) {
    if(!$(this).hasClass('visited'))
    {
        $(this).addClass('visited')
        return true;
    }
    else
    {
        $(this).removeAttr("href"); // optional
        // some other code here
        return false;
    }
});

Upvotes: 0

Dineshkani
Dineshkani

Reputation: 3015

You can do with jquery

<a href='http://somepage.com' id='get' onlick='$("#"+this.id).attr("href","")'>Something to be go </a>

Or with the javascript

<a href='http://somepage.com' id='get' onlick='document.getElementById(this.id).removeAttribute("href");'>Something to be go </a>

Upvotes: 0

IT ppl
IT ppl

Reputation: 2647

jQuery solution:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns ="http://www.w3.org 1999 xhtml" xml :lang="en">
<html>
    <head>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>        
        <script type="text/javascript">
            function check(link) {
                $(link).replaceWith($(link).text());
            }
        </script>
        <style>

            a:link{
                color:#1DAAA1;

            }
            a:visited{
                color:green;
            }
            a:hover{
                background: #ff0000;
                color: #FFF;
            }

        </style>

    </head>
    <body>

        <table width="500" align="center" border="5px solid">
            <tr align="center" >
                <td><a href="http://www.google.com" target="_blank" onclick="return check(this);"> Google </a></td>
                <td><a href="http://www.yahoo.com" target="_blank" onclick="return check(this);"> Yahoo </a></td>
                <td><a href="http://www.bing.com" target="_blank" onclick="return check(this);"> Bing </a></td>
                <td><a href="http://en.wikipedia.org" target="_blank" onclick="return check(this);"> Wikipedia </a></td>
            </tr>

        </table>
    </body>
</html>

Upvotes: -1

Ayyappan Sekar
Ayyappan Sekar

Reputation: 11475

this time i tried it with Javascript... hope it will help u:) just call the below function in "onclick()" of the required href tags...

​function check(link) {
    if (link.className != "visited") {
       //alert("new");
       link.className = "visited";
       return true;     
    }
    //alert("old");
    return false;
}​​

like ​<a href="#" onclick="return check(this);">link here</a>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​ and see demo here

Upvotes: 1

Ayyappan Sekar
Ayyappan Sekar

Reputation: 11475

just try this.... 

a:visited {
 color:green;
 pointer-events: none;
 cursor: default; 
}

Upvotes: 6

Related Questions