如何禁用网页上的所有href？ 可以用JavaScript完成吗？

Question

I am working on a system which will force member to fill in their detail first then only can view other page for the website. But I have no idea how to disable all the href link and user can only press on submit button to proceed. I couldn't found how to disable all at 1 time and I only found to be disable href 1 by 1 by id with the condition they need to click on one of the submit button. But what I want is it will disable when user is on the particular page and database status = 1 meanwhile href will be enable while status = 2 .

This is my submit button in profile-page-update.html :

 <input type="submit" name="submit" onclick="xajax_editprofile(xajax.getFormValues('updateuser')); return false;" style="width:1px; visibility:hidden;">
<a href="#" onclick="xajax_editprofile(xajax.getFormValues('updateuser')); return false;">Save</a></div>

This is all the link I need to disable :

    <div class="nav">
        <ul>
            <li style="margin-left:20px"><a href="index.php">HOME</a></li>
            <li><a href="news-listing.php">NEWS</a></li>
            <li><a>EVENTS</a>
                <ul>
                    <li><a href="event-listing.php?id=1">UPCOMING EVENTS</a></li>
                    <li><a href="event-listing.php?id=2">PAST EVENTS</a></li>
                </ul>
            </li>
            <{if !$login}>
            <li><a class="open-popup-link" href="#test-popup">COMMUNITY</a></li>
            <{else}>
            <li><a href="community-listing.php">COMMUNITY</a></li>
            <{/if}>
            <li><a href="alumni-listing.php">ALUMNI LISTING</a></li>
        </ul>
    </div>

This is some code I found on internet:

<input type="button" value="Open Drop Down" onclick="disableLinks()" />

function disableLinks() {

var links = document.getElementsByTagName('a');

for (var i = 0; i < links.length; i++) {

var link = links[i];

link.removeAttribute('href');

}

Answer 1

Technically speaking, you may disable the links by walking through all <a> elements using getElementsByName without jQuery or $("tagName") with jQuery.

But that's not what you need, I think.

If your intention is:

• To hide links in order to prevent the user from going anywhere else than to the form target, then just create a page with only the form, its submit button, and nothing else, and especially no links.

  If you simply play with page's links through JavaScript, anyone may view the source of the page and recover the links, in order to bypass the form and to navigate to the specific pages.

• To prevent the user to access anything else on the website (or to access some restricted resources), then use security checks server-side, with automated redirection if the user is not authorized to access a resource. If you're using a framework, very probably the functionality is already implemented and used to make the difference between authenticated users and guests: authenticated users will be able to access specific resources, while guests will be redirected by the framework to the log-in page.

  If you simply hide the links on the page, but don't do any security checks server-side on the "protected" pages, anyone who already used the website before (or knows somebody who did) will know the exact links to enter, bypassing again the form.

Answer 2

Using jQuery this will disable all <a> after page load.

$(function(){

   $("a").on("click", function(){return false;});

})

And you just have to run below to enable them again

 $("a").off("click");

Demo

Answer 3

You could use jQuery to prevent the default event listener for the click event while you want the links to be disabled, then unbind it when the user is allowed to navigate again.

//remove click ability
$("a").click(function(e){e.preventDefault()});
//reset
$("a").unbind('click');

Though this would need some other work if you have some click listeners you want to keep active on certain links etc.