javascript - jquery prop() 立即(重点？)

Question

我正在尝试使用 jQuery prop() 方法禁用元素(表单字段)。有两个字段，一个叫做fee，一个叫做currency。每当 fee 设置为 0 时，第二个字段 currency 将被禁用。这样做的诀窍:

        $("#fee").change(function() {
            var disabled = (this.value == "0");
            console.log(disabled);
            $("#currency").prop("disabled", disabled);
        }).change(); //to trigger on load

我想要实现的是，在离开第一个字段之前，第二个字段立即更改为禁用(所以在 focus 而不是 blur 上？)。我想实现这一点的原因是，每当用户使用 TAB 按钮时，他/她会立即选择 currency 之后的字段，以防费用为 0。

这是我目前所拥有的示例: fiddle

Answer 1

试穿 input event 。任何点击或按键操作都会立即生效。归结为 #fee在那一刻是'0'，#currency将是 disabled .在 #fee 上尝试制表符、键入或微调器它工作得很好，因为 input事件没有关于如何它获取数据的条件，它唯一关心的是它有数据.

此外，当您有 2 个条件并且有另一对条件依赖于它时，您应该从默认条件开始。我开始#fee '0' 和 #currency 处的值disabled .现在它最初以默认值启动，额外的 .change()在链的末端不再需要(虽然我不确定它是否有用...IDK 我没有测试它)。

还添加了 tab-index='0' 到每个输入以确保 Tab 键继续到下一个可用输入。默认情况下，所有输入都以这种方式运行，并且禁用的元素永远不会包含在流中，因此 tab-index='0'可能有点矫枉过正。注意输入继续禁用 #currency得到关注但没有 tab-index='0' .当然使用 input事件将使关注点成为一个有争议的问题。

演示

$("#fee").on('input', function() {
  var activeFee = this.value !== '0' ? false : true;
  $('#currency').prop('disabled', activeFee);
});

<input id='fee' type='number' tab-index='0' value='0'>

<input id='currency' tab-index='0' disabled>

<input id='tariff' type='number'>

<input id='tax' type='number' tab-index='0'>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>