显然,一个被禁用的<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');
})
在这里,我需要单击输入来启用它。但是如果我不激活它,输入就不会被发布。
当前回答
我找到了另一个解决方案:
<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');
});
其他回答
也许你可以将字段设置为只读,并在提交时禁用所有只读字段
$(".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和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>
注意:在<表单>中,它不会有常规的禁用行为,阻止服务器看到字段。这只是为了防止您想要禁用服务器端无关紧要的字段。
您可以考虑使用readonly而不是disabled。使用一些额外的CSS,您可以对输入设置样式,使其看起来像一个禁用字段。
实际上还有另一个问题。事件更改仅在元素失去焦点时触发,考虑到禁用字段,这不是逻辑。可能您正在将数据从另一个调用推入该字段。要做到这一点,你可以使用事件'bind'。
$('form').bind('change', 'input', function () {
console.log('Do your thing.');
});
我做了和Andy E非常相似的事情;只是我用了一个环绕标签。然而,我需要“名称”,所以我把它改成了一个没有“href”的标签。
禁用元素不会触发鼠标事件。大多数浏览器会将源自被禁用元素的事件传播到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)。