无法启用禁用的按钮

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?

Answer 1

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> 

Answer 2

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");
    }
});