代码之家 › 专栏 › 技术社区 › Dirk J. Faber

jquery prop()立即(在焦点上?)

jquery javascript

Dirk J. Faber · 技术社区 · 7 年前

我试图用jquery禁用一个元素(表单字段) prop() 方法。有两个字段,一个称为 fee 一个打电话来 currency . 每当 费用 设置为0,第二个字段 货币 将禁用。这就是诀窍:

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

我想实现的是,在离开第一个字段(依此类推)之前,第二个字段立即变为disabled focus 而不是开着 blur ?)。我希望实现这一点的原因是,每当用户使用tab按钮时,他/她会立即选择下面的字段 货币 ,以防费用为0。

以下是我目前掌握的一个例子: fiddle

6 回复 | 直到 7 年前

zer00ne 7 年前

试穿 input event . 它可以立即执行任何单击或键操作。归结起来就是 #fee 此时为“0”, #currency 将 disabled . 尝试使用制表符、键入或微调器 费 它工作得很好,因为 输入 事件不具有以下条件怎样它得到了数据,唯一关心的是有数据。

另外,当您有两个条件,并且有另一对条件依赖于它时,您应该从默认条件开始。我开始 费 值为“0”并且 日元 残疾人 . 现在它最初是默认的,额外的 .change() 在链的末端不再需要(尽管我不确定它是否有用…idk我没有测试它)。

还增加 tab-index='0' 以确保制表符继续到下一个可用的输入。默认情况下,所有输入的行为都是这样的,并且流中从不包含禁用的元素,因此 选项卡索引='0' 可能是杀伤力太强了。注意输入禁用的进程 日元 集中注意力但没有 选项卡索引='0' . 当然是用 输入 这件事将使关注焦点成为一个争论点。

演示

$("#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>

Coskun Ozogul 7 年前

你可以使用键控功能

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

Boku No Maxi 7 年前

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

错误事件:)

Supun Praneeth 7 年前

因为你在用 change . 在取消对输入框的聚焦(模糊)之前,不会触发更改。试试这个:

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

Igor Ilic 7 年前

你可以使用 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

这样,当用户按下选项卡时,他们将移动到货币下方的字段

Code_Ninja Julius S. 7 年前

请尝试以下代码:

$("#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 .