cannot enable a disabled button

Question

I have been trying all methods to enable a disabled element but i can't figure out why it doesn't work. I try this way:

var item = document.getElementById('admin-item-select');
var edit = document.getElementById('admin-item-editbtn');
var del = document.getElementById('admin-item-delbtn');

item.addEventListener('change', function(e) {

       if (this.value !== "") {
        console.log("clicked");
        edit.setAttribute("disabled", false);
        console.log("edit enabled");
        del.setAttribute("disabled", false);
        console.log("del enabled");
       }
    });

  <select class="input-sm item-input" id="admin-item-select" name="itemSelect">
                <option value="">Choose Item</option>
                <option value="1">blabla</option>
                <option value="2">bloblo</option>
              </select>
        <button href="http://google.com" id="admin-item-editbtn" disabled="true" >Edit Item</button>
        <button href="http://amazon.com" id="admin-item-delbtn" type="submit" disabled="true">Delete Item</button>

I tried also to use a class and the method toogleClass().. I tried prop()

Any idea what am I doing wrong?

Try `$("#admin-item-editbtn").removeAttr("disabled");` .. See if it helps.. — Lal, Jun 11 '17 at 14:50
For some more reference take a look at this: https://stackoverflow.com/questions/7526601/setattributedisabled-false-changes-editable-attribute-to-false — Maurice, Jun 11 '17 at 14:51
Duplicate of: https://stackoverflow.com/questions/7526601/setattributedisabled-false-changes-editable-attribute-to-false — Jaroslav Málek, Jun 11 '17 at 14:53

score 0 · Accepted Answer · answered Jun 11 '17 at 14:51

Option 1 (pure JS), use edit.disabled = false;

var item = document.getElementById('admin-item-select');
var edit = document.getElementById('admin-item-editbtn');
var del = document.getElementById('admin-item-delbtn');

item.addEventListener('change', function(e) {
  if (this.value !== "") {
    console.log("clicked");
    edit.disabled = false;
    console.log("edit enabled");
    del.disabled = false;
    console.log("del enabled");
  }
});

<select class="input-sm item-input" id="admin-item-select" name="itemSelect">
                <option value="">Choose Item</option>
                <option value="1">blabla</option>
                <option value="2">bloblo</option>
              </select>
<button href="http://google.com" id="admin-item-editbtn" disabled="true">Edit Item</button>
<button href="http://amazon.com" id="admin-item-delbtn" type="submit" disabled="true">Delete Item</button>

Option 2 (jQuery) $('#admin-item-editbtn').prop('disabled', false);

var item = document.getElementById('admin-item-select');

item.addEventListener('change', function(e) {
  if (this.value !== "") {
    console.log("clicked");
    $('#admin-item-editbtn').prop('disabled', false);
    console.log("edit enabled");
     $('#admin-item-delbtn').prop('disabled', false);
    console.log("del enabled");
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="input-sm item-input" id="admin-item-select" name="itemSelect">
                <option value="">Choose Item</option>
                <option value="1">blabla</option>
                <option value="2">bloblo</option>
              </select>
<button href="http://google.com" id="admin-item-editbtn" disabled="true">Edit Item</button>
<button href="http://amazon.com" id="admin-item-delbtn" type="submit" disabled="true">Delete Item</button>

score 0 · Answer 2 · answered Jun 11 '17 at 15:16

Try edit.disabled = false; and del.disabled = false;

var item = document.getElementById('admin-item-select');
var edit = document.getElementById('admin-item-editbtn');
var del = document.getElementById('admin-item-delbtn');
item.addEventListener('change', function (e) {

    if (this.value !== "") {
        console.log("clicked");
        edit.disabled = false;
        console.log("edit enabled");
        del.disabled = false; 
        console.log("del enabled");
    }
});

cannot enable a disabled button

2 Answers2