We Keep Coding

Remove 'disabled' of an element which is present in a redirected page

I'm redirecting users from a.html to b.html page after login. There is a file select button "Select Images" with "disabled" attribute on b.html page, which I want to be enabled only after FB login. Below is my code for this.
function fblogin(){
FB.login(function(response) {
if (response.status == 'connected') {
login();
} else {
//window.location.reload();
}
}, {scope:'email,publish_stream'});
return false;
}
function login() {
window.location = "b.html";
document.getElementById('uploadbtn').removeAttribute('disabled');
document.getElementById("genPNG").attr('disabled','enabled');
document.getElementById("genJPG").removeAttribute('disabled');
}
No luck with the above code, so I putted
document.getElementById('uploadbtn').removeAttribute('disabled');
document.getElementById("genPNG").attr('disabled','enabled');
document.getElementById("genJPG").removeAttribute('disabled');
on b.html page. How can I make it work as the way I want? Any help is much appreciated.
Thanks in advance.

Use .prop('disabled', false) or .prop('disabled', true)
From the jQuery .prop() (setter) documentation:
The .prop() method is a convenient way to set the value of
properties—especially when setting multiple properties, using values
returned by a function, or setting values on multiple elements at
once. It should be used when setting selectedIndex, tagName, nodeName,
nodeType, ownerDocument, defaultChecked, or defaultSelected. Since
jQuery 1.6, these properties can no longer be set with the .attr()
method. They do not have corresponding attributes and are only
properties.
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.

You are using jQuery methods on plain JS DOM nodes (however removeAttribute should work?), it should be :
$('#uploadbtn').prop('disabled', false);
Note that this has to be added in b.html, as once you've left the page, it's a bit late for javascript, it does nothing on the next page ?

Attributes dynamically changed not setting values

So all I want to do is set the disabled and readonly attributes of a text input to "disabled" and "readonly" respectively.I am using Jquery version 1.7.1 . I've tried the following methods:
$("#testtext").attr('disabled','disabled');
$("#testtext").attr("readonly","readonly");
$("#testtext").attr('disabled',true);
$("#testtext").attr("readonly",true);
$("#testtext").prop('disabled',true);
$("#testtext").prop("readonly",true);
The resulting markup looks like this:
<input type = "text" id = "testtext" disabled />
As you can see it is adding the disabled attribute but not giving it a value. This works on some devices but not all of the ones I am trying to support. This seems like something that jQuery should do but my Googling is not coming up with much in this respect. Does anyone have any advice or suggestions? Any advice would be appreciated, thanks much!

$("#testtext").prop("disabled", true);
$("#testtext").prop("readonly", true);
works everywhere, because those are Boolean flags: their presence indicates that the flag is on (the element is disabled/readonly) no matter whether the attribute has a value (or even what the value in the markup is ⇨ disabled=false is also disabled).

.prop( propertyName ) // propertyNameThe name of the property to get.
.attr( attributeName ) // attributeNameThe name of the attribute to get.
As per spec:
As of jQuery 1.6, the .attr() method returns undefined for attributes
that have not been set. In addition, .attr() should not be used on
plain objects, arrays, the window, or the document. To retrieve and
change DOM properties, use the .prop() method.
The .prop() method gets the property value for only the first element
in the matched set. It returns undefined for the value of a property
that has not been set, or if the matched set has no elements. To get
the value for each element individually, use a looping construct such
as jQuery's .each() or .map() method.
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.

go with the .prop() . it is more suitable/reliable for boolean properties than the .attr()
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
(from the jquery documentation of .prop())

JQuery Checkbox toggle with button not working after few times

Can anyone explain why the code fragment does not work after pressing toggle 3 times?
The attribute checked is still set to "checked" but the browser doesn't check the checkbox anymore.
$(document).ready(function() {
$("#btn").click(function() {
if($("#chk").is(":checked"))
$("#chk").removeAttr("checked");
else
$("#chk").attr("checked","checked");
$("#lbldebug").text($("#chk").clone().wrap('<p>').parent().html());
});
});
See http://jsbin.com/ewawih/2/edit
I've tested it both on Opera and Chrome, with the same problem in both.
What am I missing here?

for jQuery 1.9+, attr for properties will not work, you can simplify a toggle of a checkbox like:
$("#btn").click(function() {
$("#chk").prop("checked",!$("#chk").prop("checked"));
$("#lbldebug").text($("#chk").clone().wrap('<p>').parent().html());
});
EDIT: see that:!$("#chk").prop("checked") notice that first character which makes the boolean value the opposite of what it currently is, thus the toggle works by setting it to the opposite of what it currently is, no matter what that value is.
Just for an explanation, accessing the attr('checked') in jQuery 1.9+ gets the original attribute - which is a part of the markup, while the .prop("checked") accesses the current property value for that. Some things are still attributes, however this is one that is a property and access to properties through/as an attribute was deprecated and then removed in jQuery 1.9/2.0. In jQuery 1.6 they made changes and in 1.6.1 they reverted some of those changes and deprecated the attr() even though it still worked due to those 1.6.1 change. 1.9+ then removed those usages. Think of an attribute as some string, and a property as a current value. Your use of the the attribute was accessing that string which did not change whereas the property did change and hence why .prop() works.
Also note that your use of the text/wrap for the element (for debug I assume) does not show the property but only the "string" of the element which does not include the property - hence it appears not to change/be there in your "debug" this way and your would need to add access to the property (a true/false value) and append that also to get a visible representation of that value.
The attribute value reflects the default (what it was in markup at the beginning/when the page first rendered) rather than the current visible state and actual value (some older versions of IE differ). Thus you see attributes tell you nothing about the whether the checkbox is checked.
For 1.9.1 on chrome:
$("#chk").checked //returns undefined
(used to work prior to change, feels like a bug)
EDIT2:wrong:incorrect form
$("#chk")[0].checked // proper form works
$("#chk").get(0).checked // same as above, works
document.getElementById("chk").getAttribute("checked") // returns "checked" or null or "true" or "fun" or empty "" if it was set thay way, attribute present checks box
$("#chk").is(":checked") // returns true/false current value
$("#chk").attr("checked") // returns "checked" or undefined does not change
document.getElementById("chk").defaultChecked // returns true/false of original, does not change
$("#chk").prop("checked") // returns current value true/false
document.getElementById("chk").checked //returns current value true/false
$("#chk").is("[checked]") // attribute selector returns original value, does not change

if($("#chk").is(":checked"))
$("#chk").prop("checked", false);
else
$("#chk").prop("checked", true);
You should use .prop() and also checked can also be specified with BOOLEAN.

$(document).ready(function() {
$("#btn").click(function() {
if($("#chk").attr('checked')=='checked')
$("#chk").removeAttr("checked");
else
$("#chk").attr("checked","checked");
$("#lbldebug").text($("#chk").clone().wrap('<p>').parent().html());
});
});
hope it will work for you

Official solution is the Muhammad Talha Akba one:
http://jquery.com/upgrade-guide/1.9/#attr-versus-prop-

Hiding button in JQuery using .prop(hidden: true)

I am trying to figure out how to hide a button with JQuery using the .prop(hidden: true) method. For some reason, in Chrome when I set this value and view the html, the button has a hidden element, but the button still shows up as visible on the page.
Any ideas?

A button does'nt have a hidden property ?
$('button').hide();
or
$('button').toggle(true); //shows button
$('button').toggle(false); //hides button

You can use set the display style to none. For example,
$("#button").css("display", "none");
Or, .hide() for brevity,
$("#button").hide()
There's also visibility and opacity but these two may not generate the effect you desired.

You can't hide a button using jQuery's .prop() function, you have to use either .hide() or .fadeOut() or you can try with .css() method:
using .css():
$('input[submit]').css('display','none');
using fadeOut():
$('input[submit]').fadeOut();
using .hide():
$('input[submit]').hide();

Your syntax is incorrect, but there's no "hidden" property anyway. You probably want:
$('#your_button').hide();
or possibly
$('#your_button').addClass('hidden');
if you've got a "hidden" class in your CSS.
The incorrect part of your syntax is that the parameters to your function call are expressed incorrectly. Setting a property should look like:
$("#your_button").prop("name", "value");

jQuery.prop is intended for HTML attributes only, things defined on the DOM node. CSS styles aren't applicable things to set with prop, and hidden just doesn't exist, whereas href or class is applicable. Instead you must use $(el).css('display', 'none') or $(el).hide().

What you described is actually correct if you happen to use jquery alongside bootstrap4.
just do the following:
$element.prop('hidden', true);
If no bootstrap 4 available it is still works for modern browser.

prop() is a getter function: http://api.jquery.com/prop/ I suggest using hide: http://api.jquery.com/hide/

If you want to use prop, then
$("#my_button").prop("style").display="none"
I would go w/o jquery. (back to the basic)
document.getElementById("mybutton").style.display = "none";

You can use a ternary operator and the css() method to accomplish the same thing: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator
$("#button").css("display", (mycondition) ? "block" : "none");

How to remove "disabled" attribute using jQuery?

I have to disable inputs at first and then on click of a link to enable them.
This is what I have tried so far, but it doesn't work.
HTML:
<input type="text" disabled="disabled" class="inputDisabled" value="">
jQuery:
$("#edit").click(function(event){
event.preventDefault();
$('.inputDisabled').removeAttr("disabled")
});
This shows me true and then false but nothing changes for the inputs:
$("#edit").click(function(event){
alert('');
event.preventDefault();
alert($('.inputDisabled').attr('disabled'));
$('.inputDisabled').removeAttr("disabled");
alert($('.inputDisabled').attr('disabled'));
});

Always use the prop() method to enable or disable elements when using jQuery (see below for why).
In your case, it would be:
$("#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.

to remove disabled attribute use,
$("#elementID").removeAttr('disabled');
and to add disabled attribute use,
$("#elementID").prop("disabled", true);
Enjoy :)

<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/

Use like this,
HTML:
<input type="text" disabled="disabled" class="inputDisabled" value="">
<div id="edit">edit</div>
JS:
$('#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.

for removing the disabled properties
$('#inputDisabled').removeAttr('Disabled');
for adding the disabled properties
$('#inputDisabled').attr('disabled', 'disabled' );

2018, without JQuery
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);
});

Thought this you can easily setup
$(function(){
$("input[name^=radio_share]").click
(
function()
{
if($(this).attr("id")=="radio_share_dependent")
{
$(".share_dependent_block input, .share_dependent_block select").prop("disabled",false);
}
else
{
$(".share_dependent_block input, .share_dependent_block select").prop("disabled",true);
}
}
);
});

This was the only code that worked for me:
element.removeProp('disabled')
Note that it's removeProp and not removeAttr.
I'm using jQuery 2.1.3 here.

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.