Jquery 使用 attr() 禁用输入
当我尝试使用 attr() 禁用或只读输入字段时,我出现了有线行为。
removeAttr('disabled')
工作正常。
attr('name', 'somthing')
正在工作
attr('id', 'something else')
正在工作
attr('disabled','disabled ')
不工作 ->它只在 DOM 中写入 disabled="" 并且不会禁用输入字段
attr('readonly','readonly')
不起作用 ->它只在 DOM 中写入 readonly="" 但输入字段仍然可以编辑。
$(document).ready(function() {
$("input[name='rdio']").live('click', function() {
$(".radio_select").find("input[name='rdio']").each(function(){
if(this.checked)
{
$("#"+this.value).removeAttr('disabled');
}
else
{
$("#"+this.value).attr('disabled','disabled');
}
});
});
});
有人经历过这种行为吗?顺便说一句,我正在使用 jquery 1.4.2
编辑:抱歉,这是我尝试过但忘记把它放回去的东西。所以使用 attr() 问题仍然存在。
I have a wired behaviour when I try to disable or readonly a input field using the attr().
removeAttr('disabled')
is working ok.
attr('name', 'somthing')
is working
attr('id', 'something else')
is working
attr('disabled','disabled')
not working -> it writes only disabled="" in the DOM and it does not disable the input field
attr('readonly','readonly')
not working -> it writes only readonly="" in the DOM but the input field can still be edited.
$(document).ready(function() {
$("input[name='rdio']").live('click', function() {
$(".radio_select").find("input[name='rdio']").each(function(){
if(this.checked)
{
$("#"+this.value).removeAttr('disabled');
}
else
{
$("#"+this.value).attr('disabled','disabled');
}
});
});
});
Has anyone experienced this behaviour? BTW I'm using jquery 1.4.2
EDIT: Sorry, this was something I have tried and forgot to put it back. So with attr() the problem persists.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(6)
在哪种浏览器中体验这种行为会非常有趣。更有趣的是要知道,如果不工作意味着该元素没有被禁用,或者该属性只是缺少
disabled
作为值。由于
W3C
的原因,不应有disabled
或readonly
值。所以从语法上来说
是很好而且正确的。不需要任何值。
不幸的是,无法使用 javascript 创建这样的构造(如果您不想覆盖 html),因此您被迫添加一些值。由于这两个属性都是布尔值,因此您可以添加几乎任何内容。
.attr('disabled', 'foobar')
与.attr('disabled', true)
一样好。It would be pretty interesting in which browser you experience that behavior. Even more interesting would be to know, if not working means, the element does not get disabled, or the attribute is just missing the
disabled
as value.Due to
W3C
there should not be a value fordisabled
orreadonly
.So syntatically
is just fine and correct. No value needed.
Unfortunatly, there is no way to create such a construct with javascript (if you don't want to overwrite the html), so you are forced to add some value. Since both propertys are boolean, you can add pretty much anything.
.attr('disabled', 'foobar')
is just as good as.attr('disabled', true)
.尝试使用-
Try using-
我认为它应该是这样的,
对于只读来说也是一样的
I think it should be like this
and the same for readonly
.attr('disabled', 'disabled');
做得很好。W3C 规范规定您必须设置不带值的属性。但这是 jquery attr() 函数的问题。您无法设置没有值的属性。
它在 DOM 中写入
disabled=""
。但它工作得很好。请参阅此处:http://www.w3schools.com/tags/att_input_disabled.asp
.attr('disabled', 'disabled');
does a good job.The W3C specification says you have to set the attribute without a value. But thats a jquery attr() function problem. You can't set an attribute without a value.
It writes
disabled=""
in the DOM. But it is working pretty fine.See here: http://www.w3schools.com/tags/att_input_disabled.asp
执行
.attr('disabled', true/false);
以及使用readonly
是最快的方法。但是,请记住,如果某个元素被“禁用”,它将不会出现在表单提交数据中,而readonly
将出现在发布数据中。对于开发人员来说,这是一个常见的陷阱,他们想要禁用输入,但又想知道为什么他们没有在 PHP 中获取$_POST
数据。只是稍微抬起头!
Doing
.attr('disabled', true/false);
and the same withreadonly
is the quickest approach. However, do remember that if an element is "disabled" it will not appear in the forms submit data, whereasreadonly
will appear in the post data. This is a common pitfall for developers to want to disable input but then wonder why they don't get their$_POST
data in PHP.Just a little heads up !
@OP:我怀疑该按钮在功能上已禁用,但在视觉上并未禁用。
我经历了完全相同的症状。在 DOM 中使用 attr('disabled', 'disabled') 会产生disabled=""。该按钮实际上已被禁用,因为它不再生成单击事件,也不再提交表单。然而,它仍然被突出显示,就好像它是一样的。
原因是按钮的 CSS,其中包含伪选择器“:active”。即使该按钮被禁用,也会应用此功能。将 ':not([DISABLED])' 添加到 active 中删除了误导性的突出显示。
对于任何 Drupal 用户来说,“七”主题具有此 CSS,并且“七”是默认的管理主题。
我在FF和Chrome中验证了这一点。
@OP: I suspect the button is functionally disabled but visually not disabled.
I experienced exactly the same symptoms. Using attr('disabled', 'disabled') yielded disabled="" in the DOM. The button was in fact disabled in that it no longer generated a click event nor submitted the form. However it was still being highlighted as if it were.
The cause was the CSS for the button, which contained the pseudo-selector ':active'. This is being applied even though the button is disabled. Adding ':not([DISABLED])' to active removed the misleading highlighting.
To any Drupal users, the Seven theme has this CSS and Seven is the default administrative theme.
I verified this in FF and Chrome.