Disabling and enabling a html input button
Using Javascript
Disabling a html button
document.getElementById("Button").disabled = true;
Enabling a html button
document.getElementById("Button").disabled = false;
Demo Here
Using jQuery
All versions of jQuery prior to 1.6
Disabling a html button
$('#Button').attr('disabled','disabled');
Enabling a html button
$('#Button').removeAttr('disabled');
Demo Here
All versions of jQuery after 1.6
Disabling a html button
$('#Button').prop('disabled', true);
Enabling a html button
$('#Button').prop('disabled', false);
Demo Here
P.S. Updated the code based on jquery 1.6.1 changes. As a suggestion, always use the latest jquery files and the prop()
method.
How to disable HTML button using JavaScript?
Since this setting is not an attribute
It is an attribute.
Some attributes are defined as boolean, which means you can specify their value and leave everything else out. i.e. Instead of disabled="disabled", you include only the bold part. In HTML 4, you should include only the bold part as the full version is marked as a feature with limited support (although that is less true now then when the spec was written).
As of HTML 5, the rules have changed and now you include only the name and not the value. This makes no practical difference because the name and the value are the same.
The DOM property is also called disabled
and is a boolean that takes true
or false
.
foo.disabled = true;
In theory you can also foo.setAttribute('disabled', 'disabled');
and foo.removeAttribute("disabled")
, but I wouldn't trust this with older versions of Internet Explorer (which are notoriously buggy when it comes to setAttribute
).
Javascript- How to disable a html button using javascript
Set disabled = true in javascript function
<input type="button" class="standardbutton" value="Password Reset" id="mybutton" onclick=" passwordReset()"/>
In JS
function passwordReset(){
document.getElementById("mybutton").disabled = true;
}
Disable and enable button by over or under age 18 Javascript
You can assign false
to the disabled
attribute. Also, as your code stands, you can omit the condition simply using the else
block.
Demo:
var ageEl = document.getElementById('age');
manageBtn(ageEl);
ageEl.addEventListener('input', function(){manageBtn(ageEl);});
function manageBtn(el){
var age = ageEl.value;
if(age < 18){
document.getElementById('age').style.borderColor='#e52213';
document.getElementById("Btn").disabled = true;
}
else{
document.getElementById('age').style.borderColor='';
document.getElementById("Btn").disabled = false;
}
}
<input type="number" id="age">
<button id ="Btn">My Button</button>
How To Disable Button by Using Javascript
Use .attr() to set disable attribute
Usage $(selector).attr("disabled", true)
In your case : $("#button-next-3").attr("disabled", true)
Unable to disable a button element using JavaScript
You need to remove the attribute.
document.getElementById('wsSubmit').removeAttribute('disabled');
As mentioned in the comments, a duplicate Id would case this functionality to fail.
How do I disable and re-enable a button in with javascript?
true
and false
are not meant to be strings in this context.
You want the literal true
and false
Boolean
values.
startButton.disabled = true;
startButton.disabled = false;
The reason it sort of works (disables the element) is because a non empty string is truthy. So assigning 'false'
to the disabled
property has the same effect of setting it to true
.
How to disable submit button after click
You can use
document.getElementById('button').disabled="true";
Related Topics
Difference Between Client-Side and Server-side Programming
Download File Using an Ajax Request
How to Call PHP Functions by JavaScript
Execute PHP Function With Onclick
JavaScript Does Not Fire After Appending
Difference Between Properties and Attributes in Html
Get the Size of the Screen, Current Web Page and Browser Window
In JavaScript How to Make a "Click" Event Fire Programmatically For a File Input Element
Invoking JavaScript Code in an Iframe from the Parent Page
Displaying Pdf from Arraybuffer
Do Dom Tree Elements With Ids Become Global Properties
How to Change an Element'S Class With JavaScript
Can Scripts Be Inserted With Innerhtml
Which "Href" Value Should I Use For JavaScript Links, "#" or "JavaScript:Void(0)"
Adding Two Numbers Concatenates Them Instead of Calculating the Sum