How to disable input/click on textbox/image using JavaScript?

Question

I am trying to disable input event in textbox and click event on image in JavaScript.

Here is my HTML:

<div id="div1">
    Img1: <img id="img1" onclick="alert('Clicked Div1');" />
</div>

<div id="div2">
    txt1: <input type="text" id="txt1" />
</div>

<input type="button" value="Disable It"  onclick="disable();" />
<input type="button" value="Enable It"  onclick="enable();" />

This is JavaScript:

function disable()
{
    document.getElementsByName('txt1').disabled = true;
    document.getElementById("div1").disabled = true;
    document.getElementById("div2").disabled = true;
    document.getElementById("img1").disabled = true;
}
function enable()
{
    document.getElementsByName('txt1').disabled = false;
    document.getElementById("div1").disabled = false;
    document.getElementById("div2").disabled = false;
    document.getElementById("img1").disabled = false;
}

In the above code only image is disabled by document.getElementById("img1").disabled = true; that too only on IE8. It doesn't work on Chrome (V 32.0.1700.107 m) and Firefox (26.0).

I tried the JavaScript given in this answer. But it doesn't work on Chrome and Firefox.

How can I do this? Am I missing anything? I am trying to achieve this using JavaScript (not jQuery).

@NikhilButani: I am trying with JavaScript. – Himanshu Feb 13 '14 at 08:54 — Himanshu, Feb 13 '14 at 08:54

Niklas · Accepted Answer · 2014-02-13T09:32:58.340

You should target the text input by its id too.

document.getElementById('txt1').disabled = true;

Concerning the image, this might guide you in the right direction. What you can do is add a function to onmousedown and onmouseup to the image element that prevents the left-click feature. Here's a DEMO.

This won't disable the div's however.

function right(e) {
    if (navigator.appName == 'Netscape' && e.which == 1) {
        return false;
    }
    if (navigator.appName == 'Microsoft Internet Explorer' && event.button == 1) {
        return false;
    } else return true;
}


function disableit() {
    document.getElementById('txt1').disabled = true;
    document.getElementById("div1").disabled = true;
    document.getElementById("div2").disabled = true;
    document.getElementById("img1").onmouseup = right;
    document.getElementById("img1").onmousedown = right;
    document.getElementById("img1").onclick = right;
}

function enableit() {
    document.getElementById('txt1').disabled = false;
    document.getElementById("div1").disabled = false;
    document.getElementById("div2").disabled = false;
    document.getElementById("img1").onmouseup = null;
    document.getElementById("img1").onmousedown = null;
    document.getElementById("img1").onclick = yourFunction;
}

function yourFunction() {
    alert('Clicked Div1');
}

You should also set the onclick on the image to yourFunction, like this:

<img id="img1" onclick="yourFunction();" />

Sorry I misread `txt1` as `img1`. Is there any solution for image? — Himanshu, Feb 13 '14 at 09:31

score 1 · Answer 2 · answered Feb 13 '14 at 09:08

Use getElementById for textbox.

Try like this:

function disable()
{
    document.getElementById('txt1').disabled = true;
   document.getElementById("div1").disabled = true;
    document.getElementById("div2").disabled = true;
    document.getElementById("img1").disabled = true;

}
function enable()
{
    document.getElementById('txt1').disabled = false;
   document.getElementById("div1").disabled = false;
   document.getElementById("div2").disabled = false;
    document.getElementById("img1").disabled = false;
}

Please Find working code here JsBin

Thanks using `getElementById` it disables input in textbox and works on Chrome and FF too. Still looking for disabling click event on image. — Himanshu, Feb 13 '14 at 09:19

How to disable input/click on textbox/image using JavaScript?

2 Answers2