2024-08-28 05:00:04

事件

显然,一个被禁用的<input>没有被任何事件处理

有没有办法解决这个问题?

<input type="text" disabled="disabled" name="test" value="test" />
$(':input').click(function () {
    $(this).removeAttr('disabled');
})

在这里,我需要单击输入来启用它。但是如果我不激活它,输入就不会被发布。


当前回答

今天我们遇到了类似的问题,但我们不想更改HTML。我们使用mouseenter事件来实现

var doThingsOnClick = function() {
    // your click function here
};

$(document).on({
    'mouseenter': function () {
        $(this).removeAttr('disabled').bind('click', doThingsOnClick);
    },
    'mouseleave': function () {
        $(this).unbind('click', doThingsOnClick).attr('disabled', 'disabled');
    },
}, 'input.disabled');

其他回答

禁用元素不会触发鼠标事件。大多数浏览器会将源自被禁用元素的事件传播到DOM树中,因此事件处理程序可以放置在容器元素上。然而,Firefox并没有表现出这种行为,当您单击禁用元素时,它只是什么都不做。

我想不出更好的解决方案,但是,为了实现完全的跨浏览器兼容性,您可以在禁用的输入前放置一个元素,并捕获对该元素的单击。下面是我想说的一个例子:

<div style="display:inline-block; position:relative;">
  <input type="text" disabled />
  <div style="position:absolute; left:0; right:0; top:0; bottom:0;"></div>
</div>​

jq:

$("div > div").click(function (evt) {
    $(this).hide().prev("input[disabled]").prop("disabled", false).focus();
});​

示例:http://jsfiddle.net/RXqAm/170/(更新为使用jQuery 1.7的prop而不是attr)。

或者用jQuery和CSS做这个!

$('input.disabled').attr('ignore','true').css({
    'pointer-events':'none',
     'color': 'gray'
});

这样你可以让元素看起来是禁用的,没有指针事件会被触发,但它允许传播,如果提交,你可以使用属性'ignore'来忽略它。

这里的建议看起来也很适合回答这个问题

在禁用元素上执行单击事件?Javascript jQuery

jQuery('input#submit').click(function(e) {
    if ( something ) {        
        return false;
    } 
});

我找到了另一个解决方案:

<input type="text" class="disabled" name="test" value="test" />

类"disabled"通过不透明度模仿禁用元素:

<style type="text/css">
    input.disabled {
        opacity: 0.5;
    }
</style>

如果元素被禁用,则取消事件并删除类:

$(document).on('click','input.disabled',function(event) {
    event.preventDefault();
    $(this).removeClass('disabled');
});

没有理由不能使用CSS和readonly的组合来模拟disabled属性:

false - disabled: <input type="text" value="1" readonly="1" style="background-color:#F6F6F6;" > < br > Real-Disabled: <input type="text" disabled="true" value="1"></input>

注意:在<表单>中,它不会有常规的禁用行为,阻止服务器看到字段。这只是为了防止您想要禁用服务器端无关紧要的字段。