Disabling and Enabling a HTML Input Button

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 do I enable/disable a button based on a specific input value?

if(value.includes('your string')) {
    buttonElement.disabled = true
} else {
    buttonElement.disabled = false
}

If you use this pattern in onChange event it would always be updated based on the value

const buttonElement = document.querySelector('button')
const inputElement = document.querySelector('input')

inputElement.addEventListener('change', (e) => {
    if(e.target.value.includes('old.company.com')){
        buttonElement.disabled = false
    } else {
        buttonElement.disabled = true
    }
}

This is how I validate form fields if its not too complicated,
you could also use regex match with this pattern.

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

Enable/Disable button based on password input length with Javascript

Where do you call submit_btn?

Also spelling length

Here is a better version

const field = document.getElementById("passfield");
const button = document.getElementById("form-submit");

field.addEventListener("input", function() {
  button.disabled = field.value.length < 15;
})

<form class="form" id="form1" method="POST" action="submit.php" accept-charset="UTF-8" autocomplete="off">
  <input type="password" placeholder="Password" id="passfield">
  <button type="submit" disabled id="form-submit">CONNECT</button>
</form>

javascript to enable and disable a button based on changes in form

you need to add the below script

$(document).ready(function(){
$("#employee_name,#employee_name2").on("keyup",function(){
    $(".btn-action2").prop("disabled",false);
        if(($("#employee_name").val())==($("#employee_name2").val())){
                $(".btn-action2").prop("disabled",true);
    }
});

});
and below in the html

button type="submit" class="btn btn-success mt-3 btn-action2" disabled>Save</button>

What is the easiest way to disable/enable buttons and links (jQuery + Bootstrap)

Buttons

Buttons are simple to disable as disabled is a button property which is handled by the browser:

<input type="submit" class="btn" value="My Input Submit" disabled/>
<input type="button" class="btn" value="My Input Button" disabled/>
<button class="btn" disabled>My Button</button>

To disable these with a custom jQuery function, you'd simply make use of fn.extend():

// Disable function
jQuery.fn.extend({
    disable: function(state) {
        return this.each(function() {
            this.disabled = state;
        });
    }
});

// Disabled with:
$('input[type="submit"], input[type="button"], button').disable(true);

// Enabled with:
$('input[type="submit"], input[type="button"], button').disable(false);

JSFiddle disabled button and input demo.

Otherwise you'd make use of jQuery's prop() method:

$('button').prop('disabled', true);
$('button').prop('disabled', false);

Anchor Tags

It's worth noting that disabled isn't a valid property for anchor tags. For this reason, Bootstrap uses the following styling on its .btn elements:

.btn.disabled, .btn[disabled] {
    cursor: default;
    background-image: none;
    opacity: 0.65;
    filter: alpha(opacity=65);
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    color: #333;
    background-color: #E6E6E6;
}

Note how the [disabled] property is targeted as well as a .disabled class. The .disabled class is what is needed to make an anchor tag appear disabled.

<a href="http://example.com" class="btn">My Link</a>

Of course, this will not prevent links from functioning when clicked. The above link will take us to http://example.com. To prevent this, we can add in a simple piece of jQuery code to target anchor tags with the disabled class to call event.preventDefault():

$('body').on('click', 'a.disabled', function(event) {
    event.preventDefault();
});

We can toggle the disabled class by using toggleClass():

jQuery.fn.extend({
    disable: function(state) {
        return this.each(function() {
            var $this = $(this);
            $this.toggleClass('disabled', state);
        });
    }
});

// Disabled with:
$('a').disable(true);

// Enabled with:
$('a').disable(false);

JSFiddle disabled link demo.

Combined

We can then extend the previous disable function made above to check the type of element we're attempting to disable using is(). This way we can toggleClass() if it isn't an input or button element, or toggle the disabled property if it is:

// Extended disable function
jQuery.fn.extend({
    disable: function(state) {
        return this.each(function() {
            var $this = $(this);
            if($this.is('input, button, textarea, select'))
              this.disabled = state;
            else
              $this.toggleClass('disabled', state);
        });
    }
});

// Disabled on all:
$('input, button, a').disable(true);

// Enabled on all:
$('input, button, a').disable(false);

Full combined JSFiddle demo.

It's worth further noting that the above function will also work on all input types.

how to enable/disable buttons in HTML jscript

You should use getElementById instead of getElementsByName

function change(id) {
  var elem = document.getElementById(id);
  let editID = "edit_".concat(id)
  let deleteID = "delete_".concat(id)
  if (elem.value == "Undo") {
    elem.value = "Modify";
    editButtonElement = document.getElementById(editID)
    editButtonElement.disabled = false

    deleteButtonElement = document.getElementById(deleteID)
    deleteButtonElement.disabled = false
  } else {
    elem.value = "Undo";
    editButtonElement = document.getElementById(editID)
    editButtonElement.disabled = true

    deleteButtonElement = document.getElementById(deleteID)
    deleteButtonElement.disabled = true
  }
}

<input onclick="change(id)" type="button" value="Modify" id="11" class="btn btn-info"></input>

<div class="btn-group" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-secondary" disabled="false" id="edit_11">Edit</button>
  <button type="button" class="btn btn-secondary" disabled="false" id="delete_11">Delete</button>
</div>

<br></br>

<input onclick="change(id)" type="button" value="Modify" id="22" class="btn btn-info"></input>

<div class="btn-group" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-secondary" disabled="false" id="edit_22">Edit</button>
  <button type="button" class="btn btn-secondary" disabled="false" id="delete_22">Delete</button>
</div>

Disabling and Enabling a HTML Input Button