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

以下元素支持禁用属性：BUTTON、INPUT、OPTGROUP、OPTION、SELECT 和 TEXTAREA。

你可以改用一个<input type="image" />元素

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

---

演示 jsfiddle（纯 JavaScript）

演示 jsfiddle (jQuery)

Answer 2

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

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