To disable image

Question

hi guys,

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

Answer 1

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

Answer 2

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>

Answer 3

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.

Answer 4

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.