Disabling/Enabling links dynamically

Posted on 2007-10-11
Last Modified: 2012-08-14

The following function reads in the selected radio button and, according to its value, highlights the appropriate links.  Or rather actually greys out all the inappropriate ones.

I'd like to amend it so that it also disables the inappropriate ones so people can't click on them. But I can't do this permanently by removing the href or something because the links may need to be reenabled when someone chooses a different radio button.  

function showMyLinks(){
      var a = document.getElementById("linklist").getElementsByTagName("a");
//handle radio button
        var userType = document.forms.showlinks.showlinks;
        for(var i=0;i<userType.length;i++){
          if(userType[i].checked) sel = new RegExp("\\b"+userType[i].value+"\\b","i");
//add/replace one of the classes on each link to change its appearance to look disabled
        for(var i=0;i<a.length;i++){
      a[i].className += " all";  //one radio button is for all
          a[i].className = a[i].className.replace(" lowlight","");
                a[i].className += " lowlight";
Question by:Lady_M
    LVL 26

    Assisted Solution

    How about writing two onclick handlers, one of them doing nothing and assigning them at the
    same time you do the class replacements?
    LVL 18

    Assisted Solution

    YOu could put a div over each link. Would be transparent and prevent the user from clicking on it.

    Here is an example.  I left the background blue to show you what it does.  It doesn't position correctly in IE, because IE doesn't take into account it's body margins/padding when you find an elements offset.  You may have to adjust that yourself.  You'd put this in your for loop

    var disableDiv = document.createElement('div'); = 'absolute'; = a[i].offsetWidth + 'px'; = a[i].offsetHeight + 'px'; = a[i].offsetLeft + 'px'; = a[i].offsetTop + 'px'; = 1000; = 'blue';
    LVL 16

    Accepted Solution

    Putting a DIV over each link will not prevent the user from using the keyboard.

    You can cache the href value in the link:
      a.realHref = a.href;
      a.href = '#';

    You can cancel the event like EddieShipman suggests:
      function cancelClick() {return false;}

      a.onclick = cancelClick;

    To undo, just:
      a.onclick = null;



    Author Comment

    Okay thanks for that.  Sounds good, I'll give it a go hopefully at the end of the week and let you know how I get on.

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    How to run any project with ease

    Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
    - Combine task lists, docs, spreadsheets, and chat in one
    - View and edit from mobile/offline
    - Cut down on emails

    Article by: DanRollins
    This article describes a JavaScript program that creates a maze made of hexagonal cells.  In Part 2 (, we'll extend the program by adding a depth-…
    I've been asked to discuss some of the UX activities that I'm using with my team. Here I will share some details about how we approach UX projects.
    This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
    The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

    759 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    11 Experts available now in Live!

    Get 1:1 Help Now