时间戳

首页 > 解决方案 > Javascript禁用按钮，直到3个或更多输入字段具有值

javascript - Javascript禁用按钮，直到3个或更多输入字段具有值

问题描述

我的 html 页面中有 6 个输入字段，如下所示：

<div class='inputBox'>
        <form action="/" method="post">
            <div>
                <label>Angle of A = </label>
                <input class='field' autocomplete="off" autofocus name="A" type="number">
            </div>
            <div>
                <label>Angle of B = </label>
                <input class='field' autocomplete="off" autofocus name="B" type="text">
            </div>
            <div>
                <label>Angle of C = </label>
                <input class='field' autocomplete="off" autofocus name="C" type="text">
            </div>
            <div>
                <label>Side Length of a = </label>
                <input class='field' autocomplete="off" autofocus name="a" type="text">
            </div>
            <div>
                <label>Side Length of b = </label>
                <input class='field' autocomplete="off" autofocus name="b" type="text">
            </div>
            <div>
                <label>Side Length of c = </label>
                <input class='field' autocomplete="off" autofocus name="c" type="text">
            </div>

            <div>
                <button id='calculate' disabled="true" class='field' type="submit">Calculate</button>
            </div>
        </form>
</div>

我希望禁用该按钮，直到 6 个字段中的任何 3 个字段具有值。这是我的javascript代码：

        function enableButton()
        {
            var filled = 0;
            var fields = [...document.getElementsByClassName("field")];
            for (var i = 0; i < 6; i++)
            {
                if (fields[i].length() > 0)
                {
                    filled += 1;
                }
            }
            if (filled >= 3)
            {
                document.getElementById("calculate").disabled = false;
            }
            else
            {
                document.getElementById("calculate").disabled = true;
            }
        }

不幸的是，尽管具有值的字段数量很多，但该按钮仍处于禁用状态。

标签： javascript

解决方案

尝试对输入字段使用更改事件，我使用onkeyup函数来调用该enableButton函数。而不是检查fields[i].length()尝试检查是否fields[i].value存在。这是一个工作示例。

function enableButton() {
  var filled = 0;
  var fields = [...document.getElementsByClassName("field")];
  for (var i = 0; i < 6; i++) {
    if (fields[i].value) {
      filled += 1;
    }
  }
  if (filled >= 3) {
    document.getElementById("calculate").disabled = false;
  } else {
    document.getElementById("calculate").disabled = true;
  }
}
<div class='inputBox'>
  <form action="/" method="post">
    <div>
      <label>Angle of A = </label>
      <input class='field' autocomplete="off" autofocus name="A" type="number" onkeyup="enableButton()">
    </div>
    <div>
      <label>Angle of B = </label>
      <input class='field' autocomplete="off" autofocus name="B" type="text" onkeyup="enableButton()">
    </div>
    <div>
      <label>Angle of C = </label>
      <input class='field' autocomplete="off" autofocus name="C" type="text" onkeyup="enableButton()">
    </div>
    <div>
      <label>Side Length of a = </label>
      <input class='field' autocomplete="off" autofocus name="a" type="text" onkeyup="enableButton()">
    </div>
    <div>
      <label>Side Length of b = </label>
      <input class='field' autocomplete="off" autofocus name="b" type="text" onkeyup="enableButton()">
    </div>
    <div>
      <label>Side Length of c = </label>
      <input class='field' autocomplete="off" autofocus name="c" type="text" onkeyup="enableButton()">
    </div>

    <div>
      <button id='calculate' disabled="true" class='field' type="submit">Calculate</button>
    </div>
  </form>
</div>

推荐阅读