how to disable correct hyperlink

Question

I want to disable a hyperlink so that if user clicks on the link, nothing happens and the link is displayed in a grey color to look like it is disabled. Below is the hyperlink in html:

<span href="#" class="showGrid">[Open Grid]</span>

Below is the jquery code I am using to try and disable the hyperlink but it is not disabling it:

 $(".showGrid").attr("disabled", "disabled");

How do you disable a hyperlink?

Also I have a the hyperlink displayed on the top and in each row added which uses the same class (it needs the same class for both hyperlinks to work the way I want it to). How can I disable the hyperlink in the html code below and not the hyperlink in the jquery code?

Below is hyperlink in full html:

<table id="optionAndAnswer" class="optionAndAnswer">
<tr>
      <th colspan="2">
        Option and Answer
    </th>
</tr>
<tr class="option">
<td>Option Type:</td>
<td>
<div class="box">
    <input type="text" name="gridValues" class="gridTxt maxRow" readonly="readonly" />
    <span href="#" class="showGrid">[Open Grid]</span>
</div>
</td>
</tr>
</table>

Below is hyperlink in jquery code:

function insertQuestion(form) {  

var $tr = $("<tr class='optionAndAnswer' align='center'></tr>");
 var $options = $("<td class='option'></td>");

  $('.gridTxt', context).each( function() {

     var $this = $(this);
     var $optionsText = $("<input type='text' class='gridTxtRow maxRow' readonly='readonly' /><span href='#' class='showGrid'>[Open Grid]</span>").attr('name',$this.attr('name'))
                     .attr('value',$this.val())

    $options.append($optionsText);

    });

$tr.append($options);

}

The disabled attribute is only for button, input, optgroup, option, select, and textarea elements. — j08691, Feb 02 '12 at 00:13

score 1 · Accepted Answer · answered Feb 02 '12 at 00:12

To disable a hyperlink, attach an event handler to the click event and then prevent the default action. That would look like this:

$('.showGrid').click(function(e){
    e.preventDefault();
    //do whatever you want the link to actually accomplish
});

To answer your second question, you shouldn't need to do anything so long as the code I posted above runs before any additional links are created. The code above will only operate on the links that exist at the time the code runs. If this isn't possible, however, and you must run the code after additional links already exist, you could do something like:

$('.showGrid:first').click(function(e){
    //same as I wrote above
});

I'd have to see more of the potential HTML though to know for sure if the :first selector will do the job.

@user1181690, you should not have done that. This user answered your question correctly and deserves the credit for that. You should roll-back your question, accept this answer, and then make a new post for your entirely new question. — Sparky, Feb 02 '12 at 00:44

score 0 · Answer 2 · edited May 23 '17 at 12:03

0

if you want to disable a hyperlink you need to add a click handler to it, like so:

 $(".showGrid").click(function(event){
            //maybe handle the click using javascript here
          event.preventDefault();
  })

EDIT : the original question has been edited. please see here (thanks max ) the difference between event.preventDefault() and return false;

edited May 23 '17 at 12:03

Community

1
1

answered Feb 02 '12 at 00:09

Bogdan

865
6
10

2

While your answer will prevent the default action from occurring when the link is clicked, it will also prevent the click event from bubbling, which the user is not requesting. Depending on the specific case, this could be a problem. See the answer to this question for a thorough explanation: http://stackoverflow.com/questions/1357118/javascript-event-preventdefault-vs-return-false – maxedison Feb 02 '12 at 00:17

score 0 · Answer 3 · answered Feb 02 '12 at 00:13

A hyperlink tag has no attribute that allows it to be disabled. You need javascript for this. As you're already going with jquery this would be the best way:

HTML:

<a class="disabledLink">some text</a>

Javascript:

$(".disabledLink").click(function(event) {
    event.preventDefault();
});

how to disable correct hyperlink

3 Answers3