Javascript to disable button residing inside a user control

Question

Hi Team,

I am using a "user control" which contains a button and other controls. I am using it in an aspx page. I want to diable the button using Javascript. By any chance, is it possible to achieve this?

Thanks

Lijo

Answer 1

I don't really get what you mean by 'disable', but to take it away you get the element in Javascript in an object and use:

element.style.display = "none";

That completely takes it away, to just make it invisible use:

element.style.visiblity = "hidden";

To get the element in an object, the easy way is once you know the value of the id attribute, say it's id="bla", you use

element = document.getElementById("bla");

You can also just use:

document.getElementById("bla").style.display = "none"; // etc

Of course, CSS is far simpler, use:

#bla {display:none;} /* etc, can also be with visiblity */

But I'm not really sure what you mean with 'disable', also, disabling with JavaScript is NOT a form of good security, JavaScript can be turned off, also, the source can be inspected to just work around it.

Edit: Some clarification: display:none; just treats it as if it isn't there at all. visiblity:hidden; makes it completely transparent, but other elements around it are still placed as if it were there.

Answer 2

If you mean to set the attribute "disabled" it is possible

$(element).attr("disabled", "disabled"); // jQuery
element.setAttribute("disabled", "disabled"); // js

If you really need to remove literally you can use jQuery Remove

$(element).remove();

or do it by hand

var el = document.getElementById(id);
el.parentNode.removeChild(el);

if just hide is enough, I recommend doing this with CSS

Answer 3

Don't remove or hide the element as the other answers suggest. Form elements in HTML have a disabled attribute for a reason. With Javascript you would select the button element (however you are selecting elements) and set the disabled property like this:

buttonElement.disabled = true;

To reenable the button:

buttonElement.disabled = false;

Obligatory jQuery:

$(buttonSelector).attr('disabled', true); // Disable
$(buttonSelector).attr('disabled', false); // Enable