JavaScript를 사용하여 입력란/이미지를 비활성화하는 방법은 무엇입니까?

Question

텍스트 상자에서 입력 이벤트를 비활성화하고 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; 
} 

전용 이미지가 너무에서만 IE8에 document.getElementById("img1").disabled = true;으로 비활성화되어 위의 코드에서 :

<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();" /> 

이 자바 스크립트입니다 :

여기 내 HTML입니다. Chrome (V 32.0.1700.107 m) 및 Firefox (26.0)에서는 작동하지 않습니다.

this answer에 제공된 JavaScript를 사용해 보았습니다. 하지만 Chrome과 Firefox에서는 작동하지 않습니다.

어떻게하면됩니까? 내가 놓친 게 있니? JavaScript (jQuery 아님)를 사용하여이 작업을 수행하려고합니다.

Answer 1

텍스트 입력도 ID로 타겟팅해야합니다.

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

이미지와 관련하여 올바른 방향으로 안내 할 수 있습니다. 왼쪽 클릭 기능을 차단하는 이미지 요소에 onmousedown 및 onmouseup에 함수를 추가하면됩니다. Here's a DEMO.

그러나 div의 사용은 중지되지 않습니다.

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

는 또한 다음과 같이 yourFunction에 이미지에 onclick을 설정해야합니다 : 텍스트 상자에 대한

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

Answer 2

사용 getElementById. 이 같은

시도 :

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

여기서 일하는 코드 JsBin