CODEWITHSUNDEEP
jquery
user1181690
user1181690

Reputation: 1523

how to disable correct hyperlink

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

}

Upvotes: 0

Views: 216

Answers (3)

Bogdan
Bogdan

Reputation: 865

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;

Upvotes: 0

Markus
Markus

Reputation: 1016

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

Upvotes: 0

maxedison
maxedison

Reputation: 17573

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.

Upvotes: 1

Related Questions