使用 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" />

---

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