jQuery - Disable live click event for particular td

I got a table and i assign the click event via .live() to each td (id="min") in every row

View:

            <td id="min">
                @Html.Action("GetMinAmount", "Stock", new { id = item.FoodID })
            </td>      

Controller (to display either image or amount)

     // Function to return min amount, if null return "-"
    pub开发者_JAVA百科lic string GetMinAmount(int id)
    {
        var food = dbEntities.FOODs.Single(f => f.FoodID == id);
        string output = "";
        if (food.MinAmount == null)
        {
            output += "<img id=\"disable\" src=\"../../Content/Add_in_Images/disable.png\" alt=\"disable\" style=\"background-image: none\"/>";
        }
        else
        {
            return food.MinAmount.ToString();
        }
        return output;
    }

Script:

       $('#min').live('click', function () { $editdialog.dialog('open'); });

But inside the td I can have 2 conditions, one is the "enabled" state which showing the Amount where user can click and edit the amount. If the amount is null, an icon will be displayed and user cannot do anything with it.

Currently I cant remove the click handler for the disabled image. So even the td which suppose to be disabled is clickable also...

I got no idea how can i remove the click handler for the "disabled" td only.

Anyone can help??? Thanks.......

Add this after the live click event

$("img#disable").parents("td").die("click");

you can try something like this:

$('td').live('click', function (e){
    if($(this).hasClass('disabled'))
        {
            e.prefentDefault();
            e.stopPropagation();
        }
    // do your stuff here
});

I somehow change my controller to do it in a "dirty" way i would say?

 // Function to return min amount, if null return "-"
    public string GetMinAmount(int id)
    {
        var food = dbEntities.FOODs.Single(f => f.FoodID == id);
        string output = "";
        if (food.MinAmount == null)
        {
            output += "<img class=\"disable\" src=\"../../Content/Add_in_Images/disable.png\" alt=\"disable\" style=\"background-image: none\"/>";
        }
        else
        {
            output += "<h4 class=\"edit\">" + food.MinAmount + "</h4>";
        }
        return output;
    }

Just putting my amount in a wrapper and I assign the click event to the td with the amount only...

   $('.edit').live('click', function () {

Any suggestion regarding this ??

Appreciate all the feedback... Thanks....

Removing an inline onclick event handler using .removeAttr() doesn't achieve the desired effect in Internet Explorer 6, 7, or 8. To avoid potential problems, use .prop() instead:

$("#MyTd").prop("onclick", null); 

in my case e.stopImmediatePropagation() did the trick

$('.edit').live('click', function (e) {
   e.stopImmediatePropagation();
});