$("#edit").click(function(event){
event.preventDefault();
$('.inputDisabled').prop("disabled", false); // Element(s) are now enabled.
jsFiddle example here.
Why use prop() when you could use attr()/removeAttr() to do this?
Basically, prop() should be used when getting or setting properties (such as autoplay, checked, disabled and required amongst others).
While what you want to do can technically be done using attr()/removeAttr(), it doesn't mean it should be done - and can cause strange/problematic behaviour, as in this case.
"The difference between attributes and properties can be important in
specific situations. Before jQuery 1.6, the .attr() method sometimes
took property values into account when retrieving some attributes,
which could cause inconsistent behavior. As of jQuery 1.6, the .prop()
method provides a way to explicitly retrieve property values, while
.attr() retrieves attributes."
"Properties generally affect the dynamic state of a DOM element without
changing the serialized HTML attribute. Examples include the value
property of input elements, the disabled property of inputs and
buttons, or the checked property of a checkbox. The .prop() method
should be used to set disabled and checked instead of the .attr()
method. The .val() method should be used for getting and setting
value." - jQuery documentation for prop()
Pre-jQuery 3.0 (before 2016)
The reason why you should use prop over removeAttr() is that removeAttr() completely removes the disabled attribute itself - as this method would simply set the corresponding property name to false:
Prior to jQuery 3.0, using .removeAttr() on a boolean attribute such
as checked, selected, or readonly would also set the corresponding
named property to false. This behavior was required for ancient
versions of Internet Explorer but is not correct for modern browsers
because the attribute represents the initial value and the property
represents the current (dynamic) value. - jQuery 3.0 Breaking Changes
While prop() merely sets the property's underlying boolean value to false.
–
–
–
–
–
<input type="text" disabled="disabled" class="inputDisabled" value="">
<button id="edit">Edit</button>
$("#edit").click(function(event){
event.preventDefault();
$('.inputDisabled').removeAttr("disabled")
http://jsfiddle.net/ZwHfY/
<input type="text" disabled="disabled" class="inputDisabled" value="">
<div id="edit">edit</div>
$('#edit').click(function(){ // click to
$('.inputDisabled').attr('disabled',false); // removing disabled in this class
–
–
I think you are trying to toggle the disabled state, in witch case you should use this (from this question):
$(".inputDisabled").prop('disabled', function (_, val) { return ! val; });
Here is a working fiddle.
–
I know the question is about JQuery: this answer is just FYI.
document.getElementById('edit').addEventListener(event => {
event.preventDefault();
[...document.querySelectorAll('.inputDisabled')].map(e => e.disabled = false);
if($(this).attr("id")=="radio_share_dependent")
$(".share_dependent_block input, .share_dependent_block select").prop("disabled",false);
$(".share_dependent_block input, .share_dependent_block select").prop("disabled",true);
–
This question specifically mentions jQuery, but if you are looking to accomplish this without jQuery, the equivalent in vanilla JavaScript is:
elem.removeAttribute('disabled');
Try special selector:
Not working : $('#ID_Unit').removeAttr("disabled");
Works : $('select[id=ID_Unit]:disabled').removeAttr("disabled");
all "select" controls $('select:disabled').removeAttr("disabled");
"select" is control type like "type" etc.
