无法启用禁用的按钮

Question

我一直在尝试所有方法来启用禁用的元素，但我不知道为什么它不起作用。我尝试这种方式：

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>

我也尝试使用一个类和方法 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");
    }
});