使用 jQuery 切换输入禁用属性
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4702000/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Toggle input disabled attribute using jQuery
提问by Tommy Arnold
Here is my code:
这是我的代码：
$("#product1 :checkbox").click(function(){
$(this)
.closest('tr') // Find the parent row.
.find(":input[type='text']") // Find text elements in that row.
.attr('disabled',false).toggleClass('disabled') // Enable them.
.end() // Go back to the row.
.siblings() // Get its siblings
.find(":input[type='text']") // Find text elements in those rows.
.attr('disabled',true).removeClass('disabled'); // Disable them.
});
How do I toggle .attr('disabled',false);?
如何切换.attr('disabled',false);？
I can't seem to find it on Google.
我似乎无法在 Google 上找到它。
回答by Arne
$('#el').prop('disabled', function(i, v) { return !v; });
The .prop()method accepts two arguments:
该.prop()方法接受两个参数：
- Property name(disabled, checked, selected) anything that is either true or false
- Property value, can be:
- (empty) - returns the current value.
- boolean(true/false) - sets the property value.
- function- Is executed for each found element, the returned value is used to set the property. There are two arguments passed; the first argument is the index(0, 1, 2, increases for each found element). The second argument is the current valueof the element (true/false).
- 属性名称（已禁用、已选中、已选中）任何为真或假的内容
- 属性值，可以是：
- (空) - 返回当前值。
- boolean(true/false) - 设置属性值。
- function- 为每个找到的元素执行，返回值用于设置属性。传递了两个参数；第一个参数是索引（0、1、2，每个找到的元素都会增加）。第二个参数是元素的当前值（真/假）。
So in this case, I used a function that supplied me the index (i) and the current value (v), then I returned the opposite of the current value, so the property state is reversed.
所以在这种情况下，我使用了一个函数，它为我提供了索引 (i) 和当前值 (v)，然后我返回了当前值的相反值，因此属性状态被反转。
回答by ifaour
I guessto get full browser comparability disabledshould set by the value disabledor get removed!
Here is a small plugin that I've just made:
我想获得完整的浏览器可比性disabled应该由该值设置disabled或被删除！
这是我刚刚制作的一个小插件：
(function($) {
$.fn.toggleDisabled = function() {
return this.each(function() {
var $this = $(this);
if ($this.attr('disabled')) $this.removeAttr('disabled');
else $this.attr('disabled', 'disabled');
});
};
})(jQuery);
示例链接。
EDIT: updated the example link/code to maintaining chainability!
EDIT 2:
Based on @lonesomeday comment, here's an enhanced version:
编辑：更新示例链接/代码以保持可链接性！
编辑 2：
基于@lonesomeday 评论，这是一个增强版本：
(function($) {
$.fn.toggleDisabled = function(){
return this.each(function(){
this.disabled = !this.disabled;
});
};
})(jQuery);
回答by Присяжный Дмитрий
$('#checkbox').click(function(){
$('#submit').attr('disabled', !$(this).attr('checked'));
});
回答by unequalsine
Another simple option that updates on a click of the checkbox.
另一个简单的选项，单击复选框即可更新。
HTML:
HTML：
<input type="checkbox" id="checkbox/>
<input disabled type="submit" id="item"/>
jQuery:
jQuery：
$('#checkbox').click(function() {
if (this.checked) {
$('#item').prop('disabled', false); // If checked enable item
} else {
$('#item').prop('disabled', true); // If checked disable item
}
});
In action: link
在行动：链接
回答by eon
Quite a while later, and thanks to @arne, I created this similar small function to handle where the input should be disabled AND hidden, or enabled AND shown:
不久之后，感谢@arne，我创建了这个类似的小函数来处理输入应该被禁用和隐藏的位置，或启用和显示的位置：
function toggleInputState(el, on) {
// 'on' = true(visible) or false(hidden)
// If a field is to be shown, enable it; if hidden, disable it.
// Disabling will prevent the field's value from being submitted
$(el).prop('disabled', !on).toggle(on);
}
Then a jQuery object (such as $('input[name="something"]') ) is simply switched using:
然后使用 jQuery 对象（例如 $('input[name="something"]') ）简单地切换：
toggleInputState(myElement, myBoolean)
回答by lonesomeday
This is fairly simple with the callback syntax of attr:
这对于回调语法来说相当简单attr：
$("#product1 :checkbox").click(function(){
$(this)
.closest('tr') // find the parent row
.find(":input[type='text']") // find text elements in that row
.attr('disabled',function(idx, oldAttr) {
return !oldAttr; // invert disabled value
})
.toggleClass('disabled') // enable them
.end() // go back to the row
.siblings() // get its siblings
.find(":input[type='text']") // find text elements in those rows
.attr('disabled',function(idx, oldAttr) {
return !oldAttr; // invert disabled value
})
.removeClass('disabled'); // disable them
});
