jquery - 使用 jQuery 在某些事件上禁用 div

Question

我有一张图片

<div id="map-viewer-button"><img src="image/Btn1.png"
                    onmouseover="this.src='image/Btn2.png'"
                    onmouseout="this.src='image/Btn1.png'"
                    onmousedown="this.src='image/Btn3.png'"
                    onmouseup="this.src='image/Btn2.png'"               
                    onclick="disableButton()" width="200px" height="100px"></div>

我想在单击图像后禁用该图像。并在其他情况发生时启用它。

function disableButton(){
        $('#map-viewer-button :input').attr('disabled', true);
}
function enableButton(){
        $('#map-viewer-button :input').removeAttr('disabled');
}

但这不起作用。可能是什么原因？还有其他方法吗？

Answer 1

disabled 属性用于表单控件

The following elements support the disabled attribute: BUTTON, INPUT, OPTGROUP, OPTION, SELECT, and TEXTAREA.

您可以使用 <input type="image" />元素

要禁用图像输入内联使用:... onclick="this.disabled = true" />

<小时/>

demo jsfiddle (pure JavaScript)

demo jsfiddle (jQuery)