无法启用已禁用的按钮

Question

我一直在尝试所有方法来启用已禁用的元素，但我无法弄清楚它为什么不起作用。我这样试试：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

我还尝试使用类和方法toogleClass（）.. 我试过prop（）

知道我做错了什么吗？

Answer 1

选项1（纯JS），使用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>

选项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

尝试edit.disabled = false;和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");
    }
});