Disabling and enabling links using jquery

Question

(By disable I mean remove the links without removing their contents and then enable - to retrieve the links)

I've read about wrap and replacewith, bind and unbind. But I can't seem to get it to work. Basically I have a button which I click in order to disable/enable the links. Here is the code I've worked so far:

var edit = false;
$('.courselink').click(function(e){ //the links
if(edit == true){
    return false;
}
});

$('.vieweditlink').click(function(){ //This is the button

    if($(this).html() == 'Edit'){
        $(this).html('View');
        edit = true;
    }
    else {
        $(this).html('Edit');
        edit = false;
     }
 });

Everything is in $(document).ready of course

JSfiddle here: http://jsfiddle.net/ugkc8gsd/7/

Show and hide them, don't disable them. The reason you can't seem to disable them is because that's not what links are supposed to do. — C Bauer, Sep 16 '14 at 15:44
@CBauer Thanks, but please enlighten me. How am I going to do that? Hehe — joanne_, Sep 16 '14 at 15:50
Tell me specific what you are trying to achive because I don't understand what you exactly want. Maybe create a jsfiddle. — VRC, Sep 16 '14 at 15:53
e.preventDefault will stop the link from running, so all you need to do is change the return false to e.preventDefault() — Ben Potter, Sep 16 '14 at 15:54
personally I think there is something else wrong. Create a demo that replicates problem — charlietfl, Sep 16 '14 at 16:01
@VRC I want to remove the link from the content. http://jsfiddle.net/ugkc8gsd/ — joanne_, Sep 16 '14 at 16:08

VRC · Answer 1 · 2014-09-17T12:28:39.933

2

Still not so sure what you exactly are trying to achive but to hide links you just hide them. http://jsfiddle.net/ugkc8gsd/8/

Hide them in the click event button

$('.vieweditlink').click(function () 
{
    $('.courselink').hide();
});

Edit : Ooh I see u edited your post.
Well here is a new jsfiddle
http://jsfiddle.net/ugkc8gsd/10/
Hope it helps

Edit 2 : Here is the new promised jsfiddle.
http://jsfiddle.net/ugkc8gsd/12/
Hope this is what you want.

edited Sep 17 '14 at 12:28

answered Sep 16 '14 at 17:06

VRC

745
7
16

Nope. I don't want to hide the whole link. The contents inside the link should remain. – joanne_ Sep 17 '14 at 03:51
What do you mean with the contents inside the link should remain? The html is still the same but it just isn't visible – VRC Sep 17 '14 at 08:00
I mean the "Some content" should still be visible. The only difference is that the "Some content" shouldn't act as a link. The result should be something like [this](http://stackoverflow.com/questions/1767414/jquery-easiest-way-to-wrap-an-image-tag-with-an-a-anchor-tag) OMG sorry if I'm not making myself clear :( – joanne_ Sep 17 '14 at 11:01
ooh I think I get what you want. The link should work normally. when you click on the button 'edit' then the "somecontent" text should still be visible but the click shouldn't be working. Like that? – VRC Sep 17 '14 at 11:07
Yup! Exactly! Thank you – joanne_ Sep 17 '14 at 11:10
hahah I explained it in just one line xD. No offense but describing isn't your best quality :P. Anyway I will make a new jsfiddle for ya. Gimmie a few mints – VRC Sep 17 '14 at 11:11
Haha no offense taken! I know that myself. Thanks in advance :) – joanne_ Sep 17 '14 at 11:29
Unfortunately though, this did not work for my code. The links are still clickable. – joanne_ Sep 17 '14 at 17:25
Then there is something different or you didn't implement it right. Look at my last jsfiddle 12. That one is working as how u described – VRC Sep 23 '14 at 14:11
I don't know haha. It seems to be working in the JSFiddle, but I figured maybe JSFiddle doesn't allow links (or allows it only if its target's blank!) – joanne_ Sep 26 '14 at 12:49

C Bauer · Answer 2 · 2014-09-16T16:01:33.303

0

To make the links invisible when they are disabled...

http://jsfiddle.net/6q7dr9fq/3/

$('.courselink').click(function(e){ //the links
    $('.courselink:hidden').show();

    $(this).hide();
});

edited Sep 16 '14 at 16:01

answered Sep 16 '14 at 15:55

C Bauer

5,003
4
33
62

score 0 · Accepted Answer · answered Sep 17 '14 at 17:08

0

Not that anyone is interested, but here's how I solved the problem:

var edit = false;
var links = $('.courselink').toArray(); //this gets the links but not the whole elements


$('.vieweditlink').click(function(){

if($(this).html() == 'Edit'){
    $(this).html('View');
    edit = true;

    $('.courselink').each(function(i) {
        $(this).replaceWith("<div class='courselink'>"+$(this).html()+"</div>");
    });
}
else {
    $(this).html('Edit');
    edit = false;

    $('.courselink').each(function(i) {
        $(this).replaceWith("<a class='courselink' href='"+links[i]+"'>"+$(this).html()+"</a>");
    });
}
});

If anyone knows a better solution, please feel free to share! Thanks!

JSFiddle: http://jsfiddle.net/13tudb3p/

answered Sep 17 '14 at 17:08

joanne_

117
1
10

Ooh I get what you wanted. You should've said u didn't want them to be anchors anymore. Anyway this solution seems working good for u. Although ur if is kinda weird since u don't use the edit variable you declare in the beginning. You do the replace of the text which make it kinda double. You could also just create new div or anchors instead of replacing but I dunno what is better for u project. Good u found a solution tho. Next time describe it a bit better ;) – VRC Sep 23 '14 at 14:19
@VRC hi! Just saw your comment. Yup it kinda makes it double but it's fine. I just had to tweak my CSS so it looks the same :) And I didn't have to remove the anchors, really, but the solution you gave me didn't work out, so.. Hehe but thanks anyway! – joanne_ Sep 26 '14 at 12:47

Disabling and enabling links using jquery

3 Answers3