Member Avatar for rpjanaka

hi all,

i am using an image as a button. so i want to disable it on some actions.

so i used
document.getElementById("imagName").disabled = true;

but it seems that this property is not working for

Edited by pritaeas because: Being resurrected
  • 6 Contributors
  • 12 Replies
  • 8K Views
  • 3 Weeks Discussion Span
  • Latest Post Latest Post by digital-ether

Dani AI

Generated

You are seeing this because <img> is not a form control. The disabled attribute/property is defined for form-associated elements (e.g., button, input, select, textarea) and has no effect on images, so browsers ignore it on <img>. See MDN for the element’s definition and supported attributes in img: The Image Embed element and the list of elements that support the HTML attribute: disabled.

If the image is meant to submit or trigger form actions, prefer a real control for proper semantics, keyboard support, and a reliable disabled state: a button (style it with a background image or an inner <img>) or an input type="image". Both support .disabled = true natively; see MDN on <input type="image">.

If you must keep <img> with an onclick, simulate a disabled state and block interaction:

.is-disabled { pointer-events: none; opacity: 0.5; cursor: default; }
const img = document.getElementById('add');
function setDisabled(state) {
  img.classList.toggle('is-disabled', state);
  img.setAttribute('aria-disabled', String(state));
}

pointer-events: none prevents mouse clicks from reaching the image (so the inline handler will not fire), while aria-disabled="true" communicates state to assistive tech. For thorough accessibility, also ensure the image is not focusable and that any keyboard activation is routed through a real button where possible. References: pointer-events, aria-disabled.

Recommended Answers

All 12 Replies

Member Avatar for stymiee

disabled only works on form elements.

Member Avatar for rpjanaka

but this image also in the form..

Member Avatar for stymiee

But it is not a form element. A form element is something like <input> <select> and <textarea>.

Member Avatar for stymiee

It might be in the specs as being allowed but obviously browsers don't support it.

Member Avatar for MattEvans

If you use:

<input type="image" src="[href to image]"/>

You should be able to disable it. That's a valid input type; it should be supported widely.

Alterantively; try:

<button><img src="[href to image]"/></button>

You might have to restyle the button to stop it being drawn as an actual button... but the button will have a disabled property; and disabling the button will stop the image being clicked/prevent the button from being functional.

See: http://www.w3.org/TR/html4/interact/forms.html#h-17.4

Member Avatar for rpjanaka

<img src="[href to image]" name="add" onclick="sendAdd();">

this is the way i am useing the image as a button.
is this possible to disable.....?

Member Avatar for jamello

i believe you can. add id property and then try and disable. Pls get back to me.
that is

<img src="[href to image]" id="add" name="add" onclick="sendAdd();">

<script lang=javascript>
document.all.add.disabled = true;
</script>

<img src="[href to image]" name="add" onclick="sendAdd();">

this is the way i am useing the image as a button.
is this possible to disable.....?

Member Avatar for rpjanaka

ya. i have already used the id property to access it, but still it is not working. i am using the Mozilla browser. so the way to access the image is as follow.

document.getElementById("add").disabled = true;

Member Avatar for jamello

This might be a mozilla stuff. I have used it this way and it works. Did you try what MattEvans suggested?

ya. i have already used the id property to access it, but still it is not working. i am using the Mozilla browser. so the way to access the image is as follow.

document.getElementById("add").disabled = true;

Member Avatar for rgtaylor

Dude, you have the answer above already...the onClick parameter is ALWAYS going to run when clicked... this is NOT form input.... The input tag with type="image" is the CORRECT way to use an image as a button... if you don't do it correctly even when people tell you, then there is little we can do...

Now to do it your way, don't use disable, but hide the button all togther then it isn't being enabled... if they can't see it they can't click it, so your onClick won't be an issue...

OK, but I highly recomend using the proper method of input tag with type="image" parameter set.

Member Avatar for digital-ether

<img src="[href to image]" name="add" onclick="sendAdd();">

this is the way i am useing the image as a button.
is this possible to disable.....?

I don't think disabled works on an <img> as you have it. Why not just use javascript to check if you've disabled an image?

eg:

onclick="if(!this.disabled)sendAdd();"
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.