Javascript to disable the click

Question

HTML:

<a href="#" id="one">this should be disabled button</a>
<a href="#" onclick='$("a#one").click();'>click button 2</a>

Javascript:

 $(document).ready(function () {
    $('#one').click({
        alert("clicked!");
    });
});

How do I make the 1st link unclickable, while the 2nd link actually clicks the 1st link.

score 3 · Answer 1 · edited May 23 '17 at 11:45

3

Simply trigger the click after disabling what you want disabled:

Here's a working fiddle to demonstrate.

CSS

.disableClick {
  pointer-events: none;
  color: grey;
}

HTML

<a href="#" id="one" class="disableClick">this should be disabled button</a><br />
<a href="#" id="two">click button 2</a>

JavaScript

$(document).ready(function() {
  $('#one').click(function () {
    alert("Link one clicked!");
  });

  $("#two").click(function () {
    $("#one").trigger("click");
  });
});

Additional Information

As it relates to disabling your anchor, there are lots of options. Start here - How do you make an anchor link non-clickable or disabled?

edited May 23 '17 at 11:45

Community

1
1

answered Feb 29 '16 at 10:50

James Hill

60,353
20
145
161

What are you writing? Where do I put this, its not working – LIGHT Feb 29 '16 at 10:54
I want to click the 1st link via javascript but not directly when the 1st link is clicked. – LIGHT Feb 29 '16 at 10:54
@Prakash, did you downvote because you didn't understand my answer? That's demotivation for you... – James Hill Feb 29 '16 at 10:54
@Prakash, I've added a working fiddle to demonstrate. FYI - It's generally considered distasteful to be short/rude with people trying to help you... – James Hill Feb 29 '16 at 11:02

score 0 · Answer 2 · answered Feb 29 '16 at 10:57

Another way could be to use jquery one, where you will bind the event everytime and use it

<a href="#" id="one">this should be disabled button</a>
<a href="#" id="two">click button 2</a>

Observe that I have added an id to the second anchor tag

$(document).ready(function () {
    $('#one').unbind("click"); //unbind the click on the first anchor
    $('#two').bind("click", function(){ //bind it for once.

        $('#one').one("click", function(){
           alert( "one click triggered" );
        });         
        $( "#one" ).trigger( "click" ); //trigger the click after binding it for one
    });

});

Javascript to disable the click

2 Answers2