find(":input[type='text']") // Find text elements in that row. . attr('disabled',false). toggleClass('disabled') // Enable them. .
An element can be disabled in HTML by setting disable property to true and enabled again by setting disabled=false. By using jQuery, you can grab the element you want to enable or disable and change this property by using the prop() or attr() function, depending upon the version of jQuery you are using.
You can use $(":disabled") to select all disabled items in the current context. To determine whether a single item is disabled you can use $("#textbox1").is(":disabled") .
The disabled attribute can be set to keep a user from using the <input> element until some other condition has been met (like selecting a checkbox, etc.). Then, a JavaScript could remove the disabled value, and make the <input> element usable. Tip: Disabled <input> elements in a form will not be submitted!
$('#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);
Example link.
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')); });
Another simple option that updates on a click of the checkbox.
HTML:
<input type="checkbox" id="checkbox/>
<input disabled type="submit" id="item"/>
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
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:
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:
toggleInputState(myElement, myBoolean)
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With