显然,一个被禁用的<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');
其他回答
在某些浏览器中,禁用的元素“吃掉”点击——它们既不响应这些点击,也不允许事件处理程序在元素或其容器的任何位置捕获它们。
恕我直言,最简单、最干净的“修复”这个问题的方法(如果你确实需要像OP那样捕捉禁用元素的点击)就是向你的页面添加以下CSS:
input[disabled] {pointer-events:none}
这将使对禁用输入的任何单击都传递到父元素,在父元素中您可以正常捕获它们。(如果您有几个禁用的输入,您可能希望将每个输入放入单独的容器中,如果它们还没有这样布局的话—例如,一个额外的<span>或<div>—只是为了便于区分单击了哪个禁用的输入)。
不幸的是,这个技巧不适用于不支持指针事件CSS属性的旧浏览器。(它应该工作在IE 11, FF v3.6, Chrome v4): caniuse.com/#search=pointer-events
如果您需要支持旧的浏览器,则需要使用其他答案之一!
这里的建议看起来也很适合回答这个问题
在禁用元素上执行单击事件?Javascript jQuery
jQuery('input#submit').click(function(e) {
if ( something ) {
return false;
}
});
今天我们遇到了类似的问题,但我们不想更改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');
也许你可以将字段设置为只读,并在提交时禁用所有只读字段
$(".myform").submit(function(e) {
$("input[readonly]").prop("disabled", true);
});
而输入(+脚本)应该是
<input type="text" readonly="readonly" name="test" value="test" />
$('input[readonly]').click(function () {
$(this).removeAttr('readonly');
});
一个活生生的例子:
$(".myform").submit(function(e) { $("input[readonly]").prop("disabled", true); e.preventDefault(); }); $('.reset').click(function () { $("input[readonly]").prop("disabled", false); }) $('input[readonly]').click(function () { $(this).removeAttr('readonly'); }) input[readonly] { color: gray; border-color: currentColor; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form class="myform"> <input readonly="readonly" value="test" /> <input readonly="readonly" value="test" /> <input readonly="readonly" value="test" /> <input readonly="readonly" value="test" /> <input readonly="readonly" value="test" /> <input readonly="readonly" value="test" /> <input readonly="readonly" value="test" /> <input readonly="readonly" value="test" /> <input readonly="readonly" value="test" /> <button>Submit</button> <button class="reset" type="button">Reset</button> </form>
我会建议一个替代方案-使用CSS:
input.disabled {
user-select : none;
-moz-user-select : none;
-webkit-user-select : none;
color: gray;
cursor: pointer;
}
而不是disabled属性。然后,您可以添加自己的CSS属性来模拟禁用的输入,但是具有更多的控制。