javascript - 仅当文本输入为 0 时禁用按钮

Question

我有以下代码:

var total = document.getElementById('total--input');

document.getElementById('btn-increment-total').addEventListener('click', function() {
  if (total.value > 1) {
    console.log('enabled');
    document.getElementById('btn-decrement-total').enabled = true;
  }

  total.value++;
});

document.getElementById('btn-decrement-total').addEventListener('click', function() {
  if (total.value == 0) {
    console.log('disabled');
    document.getElementById('btn-decrement-total').disabled = true;
  }

  total.value--;
});

<button id="btn-increment-total">plus</button>
<button id="btn-decrement-total">min</button>
<input type="text" id="total--input" value="1">

“递减”按钮似乎可以工作，并且会在满足条件时自行禁用。

但是“递增”按钮似乎并没有重新启用“递减”按钮。任何人都知道为什么以及如何解决这个问题？

Answer 1

没有enabled属性，你应该使用disable="false" :

document.getElementById('btn-decrement-total').disabled = false;

代替:

document.getElementById('btn-decrement-total').enabled = true;
_______________________________________________^^^^^^^

工作样本:

var total = document.getElementById('total--input');

document.getElementById('btn-increment-total').addEventListener('click', function() {
  total.value++;

  if (total.value > 0) {
    console.log('enabled');
    document.getElementById('btn-decrement-total').disabled = false;
  }

});

document.getElementById('btn-decrement-total').addEventListener('click', function() {
  total.value--;

  if (total.value == 0) {
    console.log('disabled');
    document.getElementById('btn-decrement-total').disabled = true;
  }
});

<button id="btn-increment-total">plus</button>
<button id="btn-decrement-total">min</button>
<input type="text" id="total--input" value="1">