使用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属性用于表单控件

  

以下元素支持disabled属性：BUTTON，INPUT，OPTGROUP，OPTION，SELECT和TEXTAREA。

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

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

---

demo jsfiddle (pure JavaScript)

demo jsfiddle (jQuery)

Answer 2

请将代码更改为此并尝试...

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