$input.disabled = true;
要么
$input.disabled = "disabled";
哪种标准方法?相反,如何启用禁用的输入?
$input.disabled = true;
要么
$input.disabled = "disabled";
哪种标准方法?相反,如何启用禁用的输入?
Answers:
要更改disabled
属性,您应该使用.prop()
函数。
$("input").prop('disabled', true);
$("input").prop('disabled', false);
该.prop()
函数不存在,但.attr()
具有相似的功能:
设置禁用的属性。
$("input").attr('disabled','disabled');
要再次启用,正确的方法是使用 .removeAttr()
$("input").removeAttr('disabled');
您始终可以依赖于实际的DOM对象,并且如果只处理一个元素,它可能会比其他两个选项快一点:
// assuming an event handler thus 'this'
this.disabled = true;
使用.prop()
或.attr()
方法的优点是可以为一堆选定项设置属性。
注意:在1.6中,有一种.removeProp()
听起来很像的方法removeAttr()
,但不应在本'disabled'
文档中的“摘录”之类的本机属性上使用:
注意:请勿使用此方法删除本机属性,例如选中,禁用或选中。这将完全删除该属性,并且一旦删除,就不能再次将其添加到element中。使用.prop()将这些属性设置为false。
实际上,我对此方法有很多合法用途表示怀疑,布尔道具的使用方式应该设置为false,而不是像1.5中的“属性”对应那样“删除”它们。
':input'
,而不仅仅是'input'
。后者仅选择实际的<input>元素。
input,textarea,select,button
使用要好于:input
- :input
因为选择器效率很低,因为它必须先选择*
然后循环遍历每个元素并按标记名进行过滤-如果直接传递4个标记名选择器,速度会更快。而且,:input
它不是标准的CSS选择器,因此,任何可能的性能提升都querySelectorAll
将丢失
.removeProp("disabled")
如@ThomasDavidBaker所指出的那样,如果使用Chrome之类的浏览器,则使用会导致“属性被完全删除而不再添加”的问题,而在诸如Firefox的某些浏览器上运行良好。我们在这里应该非常小心。始终.prop("disabled",false)
改用
只是为了新的约定和使其适应性发展(除非ECMA6(????)发生了重大变化:
$(document).on('event_name', '#your_id', function() {
$(this).removeAttr('disabled');
});
和
$(document).off('event_name', '#your_id', function() {
$(this).attr('disabled','disabled');
});
$(document).on('event_name', '#your_id', function() {...})
代替$('#your_id').on('event_name', function() {...})
。如jQuery .on()文档中所述,前者使用委托并监听所有 event_name
冒泡的事件document
并检查它们是否匹配#your_id
。后者$('#your_id')
仅侦听事件,并且扩展性更好。
// Disable #x
$( "#x" ).prop( "disabled", true );
// Enable #x
$( "#x" ).prop( "disabled", false );
有时您需要禁用/启用表单元素,例如input或textarea。jQuery通过将disable属性设置为“ disabled”,可以轻松实现此目的。例如:
//To disable
$('.someElement').attr('disabled', 'disabled');
要启用禁用的元素,您需要从此元素中删除“ disabled”属性或将其字符串清空。例如:
//To enable
$('.someElement').removeAttr('disabled');
// OR you can set attr to ""
$('.someElement').attr('disabled', '');
请参阅:http : //garmoncheg.blogspot.fr/2011/07/how-to-disableenable-element-with.html
$("input")[0].disabled = true;
要么
$("input")[0].disabled = false;
您可以将其放在代码的全局位置:
$.prototype.enable = function () {
$.each(this, function (index, el) {
$(el).removeAttr('disabled');
});
}
$.prototype.disable = function () {
$.each(this, function (index, el) {
$(el).attr('disabled', 'disabled');
});
}
然后,您可以编写如下内容:
$(".myInputs").enable();
$("#otherInput").disable();
prop
而不是 attr
使用disabled
属性才能使其正常工作(假设jQuery 1.6或更高版本)。
attr
什么?我在某些项目中使用了上面的代码,据我所知它可以正常工作
checked
复选框的属性。使用attr
不会产生相同的结果。
使用它们的方法有很多,您可以启用/禁用任何元素:
方法1
$("#txtName").attr("disabled", true);
方法2
$("#txtName").attr("disabled", "disabled");
如果您使用的是jQuery 1.7或更高版本,请使用prop()而不是attr()。
$("#txtName").prop("disabled", "disabled");
如果您希望启用任何元素,则只需做与禁用它相反的操作即可。但是,jQuery提供了另一种删除任何属性的方法。
方法1
$("#txtName").attr("disabled", false);
方法2
$("#txtName").attr("disabled", "");
方法3
$("#txtName").removeAttr("disabled");
同样,如果您使用的是jQuery 1.7或更高版本,请使用prop()而不是attr()。那是。这是使用jQuery启用或禁用任何元素的方式。
2018年更新:
现在有没有必要jQuery和它已经有一段时间document.querySelector
或document.querySelectorAll
(多个元素)做几乎完全同样的工作$,再加上更明确的人getElementById
,getElementsByClassName
,getElementsByTagName
禁用“输入复选框”类的一个字段
document.querySelector('.input-checkbox').disabled = true;
或多个元素
document.querySelectorAll('.input-checkbox').forEach(el => el.disabled = true);
您可以使用jQuery prop()方法来禁用或启用表单元素或使用jQuery动态控制。prop()方法需要jQuery 1.6及更高版本。
例:
<script type="text/javascript">
$(document).ready(function(){
$('form input[type="submit"]').prop("disabled", true);
$(".agree").click(function(){
if($(this).prop("checked") == true){
$('form input[type="submit"]').prop("disabled", false);
}
else if($(this).prop("checked") == false){
$('form input[type="submit"]').prop("disabled", true);
}
});
});
</script>
对输入类型禁用true:
在特定输入类型的情况下(例如,文本类型输入)
$("input[type=text]").attr('disabled', true);
对于所有输入类型
$("input").attr('disabled', true);
$("input[name=method]").prop('disabled', true);
我使用@gnarf答案并将其添加为功能
$.fn.disabled = function (isDisabled) {
if (isDisabled) {
this.attr('disabled', 'disabled');
} else {
this.removeAttr('disabled');
}
};
然后像这样使用
$('#myElement').disable(true);
这样使用
$( "#id" ).prop( "disabled", true );
$( "#id" ).prop( "disabled", false );
<html>
<body>
Name: <input type="text" id="myText">
<button onclick="disable()">Disable Text field</button>
<button onclick="enable()">Enable Text field</button>
<script>
function disable() {
document.getElementById("myText").disabled = true;
}
function enable() {
document.getElementById("myText").disabled = false;
}
</script>
</body>
</html>
在jQuery Mobile中:
$('#someselectElement').selectmenu().selectmenu('disable').selectmenu('refresh', true);
$('#someTextElement').textinput().textinput('disable');
$('#someselectElement').selectmenu().selectmenu('enable').selectmenu('refresh', true);
$('#someTextElement').textinput('enable');