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上？）。我想实现此目的的原因是，只要费用为0，每当用户使用TAB按钮时，他/她都会立即选择currency之后的字段。

这是到目前为止我所拥有的一个例子： fiddle

Answer 1

尝试 input event 。立即进行任何点击或按键操作。归结为#fee为“ 0”，#currency将为disabled。尝试在#fee上进行制表，键入或微调，因为input事件没有条件如何，它唯一需要担心的是它有数据。

此外，当您有2个条件并且还有另一对条件依赖于它时，您应该从默认条件开始。我将#fee的值从'0'和#currency disabled开始。现在，它最初是默认启动的，不再需要在链的末尾添加额外的.change()（尽管我不确定它是否真的有用……IDK我没有对其进行测试）。

还向每个输入添加了 tab-index='0' ，以确保制表符可继续到下一个可用输入。默认情况下，所有输入都以这种方式运行，并且流程中永远不会包含禁用的元素，因此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>

Answer 2

您可以使用键入功能

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

Answer 3

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

错误事件：）

Answer 4

因为您正在使用change。直到取消聚焦（模糊）输入框，更改才会触发。试试这个：

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

Answer 5

您可以使用keyup或keydown事件而不是change来完成此操作，或者您要使用现有代码，而不是像这样编写代码：

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

这样，当用户按下TAB时，他们将被移至货币下面的字段

Answer 6

尝试以下代码：

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
Fee: <input id="fee"><br> Currency: <input id="currency"><br> Something else:<input id="somethingelse">

我刚刚将事件从change更改为keyup。

jQuery prop（）立即（专注吗？）

6 个答案:

演示