How to Disable HTML Button Using JavaScript

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



Leave a reply



Submit