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);?
I can't seem to find it on Google.
$('#el').prop('disabled', function(i, v) { return !v; });
The .prop() method accepts two arguments:
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 guess to get full browser comparability disabled should set by the value disabled or get removed!
Here is a small plugin that I've just made:
(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:
(function($) {
$.fn.toggleDisabled = function(){
return this.each(function(){
this.disabled = !this.disabled;
});
};
})(jQuery);
$('#checkbox').click(function(){
$('#submit').attr('disabled', !$(this).attr('checked'));
});