CODEWITHSUNDEEP
javascripthtml
user42348
user42348

Reputation: 4319

To disable image

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?

Upvotes: 1

Views: 10334

Answers (5)

suryakiran
suryakiran

Reputation: 1996

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.

Upvotes: 0

cdm9002
cdm9002

Reputation: 1960

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.

Upvotes: 0

Jason Glover
Jason Glover

Reputation: 618

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.

Upvotes: 3

TheVillageIdiot
TheVillageIdiot

Reputation: 40512

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>

Upvotes: 0

Walter Rumsby
Walter Rumsby

Reputation: 7535

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

Upvotes: 0

Related Questions