how to disable correct hyperlink
<p>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:</p>

<pre><code>&lt;span href="#" class="showGrid"&gt;[Open Grid]&lt;/span&gt;
</code></pre>

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

<pre><code> $(".showGrid").attr("disabled", "disabled");
</code></pre>

<p>How do you disable a hyperlink?</p>

<p>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?</p>

<p>Below is hyperlink in full html:</p>

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

<p>Below is hyperlink in jquery code:</p>

<pre><code>function insertQuestion(form) {  

var $tr = $("&lt;tr class='optionAndAnswer' align='center'&gt;&lt;/tr&gt;");
 var $options = $("&lt;td class='option'&gt;&lt;/td&gt;");

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

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

    $options.append($optionsText);

    });

$tr.append($options);

}
</code></pre>
