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);

}

Answer 1

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.