显然,一个被禁用的<input>没有被任何事件处理
有没有办法解决这个问题?
<input type="text" disabled="disabled" name="test" value="test" />
$(':input').click(function () {
$(this).removeAttr('disabled');
})
在这里,我需要单击输入来启用它。但是如果我不激活它,输入就不会被发布。
显然,一个被禁用的<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'来忽略它。
我做了和Andy E非常相似的事情;只是我用了一个环绕标签。然而,我需要“名称”,所以我把它改成了一个没有“href”的标签。
$(函数(){ $(“输入:禁用”).closest (" div ") .click(函数(){ (美元);(输入:禁用)。attr(“禁用”,假).focus (); }); }); < script src = " https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js " > < /脚本> < div > <input type="text" disabled /> < / div >
这里的建议看起来也很适合回答这个问题
在禁用元素上执行单击事件?Javascript jQuery
jQuery('input#submit').click(function(e) {
if ( something ) {
return false;
}
});