javascript - 无法启用禁用的按钮

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

方案一(纯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>