I have an html image. In its onClick event I have written code to show a calendar. I want to disable that image, which means I should not be able to click that image, but the image should be visible. I want to disable the onclick event of image. Can anybody help?

I have an html image. In its onClick event I have written code to show a calendar. I want to disable that image, which means I should not be able to click that image, but the image should be visible. I want to disable the onclick event of image. Can anybody help?

• javascript
• html

• How will the calendar be visible then? – Moayad Mardini Commented Jun 30, 2009 at 5:44
• 1 To clarify: you want to be able to disable the onclick method of a image. Correct? – glasnt Commented Jun 30, 2009 at 5:46

5 Answers 5

Or without making any changes to your calendar...

<div>Click the button because I am enabled... <img id="btnSubmit" src="submitbutton.gif" onclick="Foobar(this,event);" alt="submit button" /></div>

<p>
<span onclick="ToggleOnclick('btnSubmit');">Click here to disable/enable the image&#39;s onclick</span>
</p>

<script>
    function ToggleOnclick(elID)
    {
        /// <summary>
        /// 
        /// </summary>

        var el = document.getElementById(elID);
        if (el.onclick)
        {
            // Disable the onclick
            el._onclick = el.onclick;
            el.onclick = null;
            alert(el.id +'\'s .onclick has been disabled.');
        }
        else //if (!(button._onclick))
        {
            // Disable the onclick
            el.onclick = el._onclick;
            el._onclick = null;
            alert(el.id +'\'s .onclick has been enabled.');
        }
    }

    function Foobar(el, e)
    {
        alert('Submitting...');
    }
</script>

The gold is in the ToggleOnclick. In fact you could generalise that any use it to disable/enable events on just about anything.

I assume you have something like:

<a href="#" onclick="cal.prevMonth(); return false;" class="Prev">&nbsp;</a>
...
<script>
    var Calendar = function() {
        var month = ...;

        var updateDisplay = function() {
            ...
        };

        return {
            prevMonth: function() {
                month--;
                updateDisplay();
            }
        };
    };

    var cal = new Calendar();
</script>

Calendar is a class with private members, cal is an instance of that class.

All you should have to do is add a new member to Calendar that tracks if your onclick should be disabled, e.g. isDisabled, and check for this in the function you call in your onclick, e.g.

prevMonth: function() {
    if (isDisabled) {
        return;
    }

    month--;
    updateDisplay();
}

easiest method is to use some hidden field or javascript variable

HiddenField:

<asp:HiddenField id="hdnValue" runat="server" value="true"/>

<script type="text/javascript">
function ImageClickHandler(){
   var i=document.getElementById(<%=hdnValue.ClientID%>).Value; 
  //don't know if .value works because I'm very much into jQuery 

 if(i=='true') //go ahead and show calendar
 else //don't show !
}
</script>

Variable:

var showCal = "<%= VARIABLE_TO_SET_IF_CAL_ENABLED%>";

<script type="text/javascript">
function ImageClickHandler(){
 if(showCal=='true') //go ahead and show calendar
 else //don't show !
}
</script>

As has been said, just add a condition within the onclick handler.

<script type="text/javascript">

 var _imageClickDisabled = false;

 function disableImageClick()
 {
  _imageClickDisabled = true;
 }

 function onImageClick()
 {
   if (_imageClickDisabled)
   {
     return;
   }

   // show your calendar here
   //
   // : : :
 }

</script>

<img ... onclick="onImageClick()" />

Just call the disableImageClick() function to stop the calendar showing.

Hi it is very very late,

But I too have got same requirement and I have fixed it by replacing the image tag with input element with type as image, the benefit of this element is it show the image as input element and disabled property will allow you disable click event. Below is the code I have used

<input type="image" src="<date icon>" 
onclick="return showCalender('txtdate','dd\mm\y');" disabled="disabled"></input>

Keep in mind that, the disabled attribute will only work for form related elements

Thought might be helpful for other guys in future.