jQuery遍历输入字段并禁用

Question

我有一个问题想弄清楚...

我在一个表单中有很多输入，但我只需要使用 player 类遍历 div 中的输入。

<div class="player">
 <input type="text" value="0" class="unit" />
 <input type="text" value="0" class="unit" />
 <input type="text" value="0" class="unit" />
 <input type="text" value="0" class="unit" />
 <input type="text" value="0" class="unit" />
 <input type="text" value="0" class="unit" />
 <input type="text" value="0" class="unit" />
</div>

一旦修改了输入字段，我需要遍历它们，并计算有多少输入字段中有 0，如果它的 1 或超过 4 个禁用提交按钮。

我一直在尝试这样，但它似乎不起作用

    $(document).ready(function()
    {
        $(function()
        {
            var $sum = parseInt($("#sum").text(), 10);
            var $num = 0;
            if(($sum == 0))
            {
                $("button[name=submit2]").attr("disabled", "disabled");
            }

            $(".player input[type=text]").bind("DOMSubtreeModified", function()
            {
                $.each($("input[type=text]"),function(){
                    if (!isNaN(+this.value)) 
                    {
                        ++$num;
                    }
                });
                if (($num > 4) || ($num == 1))
                     $("button[name=submit2]").attr("disabled", "disabled");
                else
                     $("button[name=submit2]").removeAttr("disabled");
            });
        })      
    });

我也试过了

        $(document).ready(function(){
            $(".unit").each(function() {

                $(this).keyup(function(){
                    CheckNull();
                });
            });
            function CheckNull() {
                var $num = 0;
                $(".unit").each(function() {
                    if(!isNaN(this.value) && this.value.length!=0) {
                        ++$num;
                    }
                });
                if (($num > 4) || ($num == 1))
                    $("button[name=submit2]").attr("disabled", "disabled");
                else
                    $("button[name=submit2]").removeAttr("disabled");
            }
        });

Answer 1

尝试改变

if(!isNaN(this.value) && this.value.length!=0) {
   ++$num;
}

与

if($(this).val() != "" && $(this).val() !=0) {
   ++$num;
}

更多的jQuery风格

Answer 2

我想这就是你想要的：

// control function
function checkInputs() {
    var num = 0;
    // foreach inputs
    $(".player input").each(function(i,item) {
      var value = $(this).val();
      if (value.trim() === "0") {
        num++;
      }
    });
    if (num === 1 || num > 4) {
      $("#myForm input[type='submit']").attr("disabled", "true");
    } else {
      $("#myForm input[type='submit']").removeAttr("disabled");
    }
}
// if you want a first check after loading the page :
checkInputs();

$(".player input").change(
  // This function will be called each time an input change in the player div
  checkInputs
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form id="myForm">
  <div class="player">
   <input type="text" value="0" class="unit" />
   <input type="text" value="0" class="unit" />
   <input type="text" value="0" class="unit" />
   <input type="text" value="0" class="unit" />
   <input type="text" value="0" class="unit" />
   <input type="text" value="0" class="unit" />
   <input type="text" value="0" class="unit" />
  </div>

  <input type="submit"/>
</form>

Answer 3

我不知道你为什么要检查长度？ this.value.length!=0

我调整了你的代码，这里是小提琴链接：http://jsfiddle.net/bLa6evpg/

希望对您有所帮助！

Answer 4

我无法遵循您的功能，但我相信您的问题是您在页面加载时运行它，而不是在输入框的 onchange 上运行。我通过在这个codepen

中实现了所需的功能

html:

<div class="player">
<input type="text" value="0" class="unit" onchange="validateChanges()" type="number"/>
<input type="text" value="0" class="unit" onchange="validateChanges()" type="number" />
<input type="text" value="0" class="unit" onchange="validateChanges()" type="number" />
<input type="text" value="0" class="unit" onchange="validateChanges()" type="number" />
<input type="text" value="0" class="unit" onchange="validateChanges()" type="number" />
<input type="text" value="0" class="unit" onchange="validateChanges()" type="number" />
<input type="text" value="0" class="unit" onchange="validateChanges()" type="number" />
</div>
<button name="submit2">Click</button>

JS：

function validateChanges() {
  var playerDiv = document.getElementsByClassName("player")[0];
  var inputs = playerDiv.getElementsByTagName("input");
  var total = 0;
  for(var i = 0; i < inputs.length; i++) {
    total += parseInt(inputs[i].value);
  }
  if(total == 1 || total > 4) { // IF total is 1 or more then 4
    document.getElementsByTagName("button")[0].disabled = true;
  } else {
    document.getElementsByTagName("button")[0].disabled = false;
  }
}

Answer 5

看起来我几乎是对的，只是搞砸了一点 Silent_coder 修复了这个 +我添加了一些我在这里看到的技巧

    $(document).ready(function(){
        CheckNull();
        $(".player input").each(function() {

            $(this).keyup(function(){
                CheckNull();
            });
        });
        function CheckNull() {

            var $num = 0;
            $(".player input").each(function() {

                if(this.value != 0 ) {
                    $num++;
                }
            });  
            if (($num > 4) || ($num <= 1))
                $("button[name=submit2]").attr("disabled", "disabled");
            else
                $("button[name=submit2]").removeAttr("disabled");
        }
    });

就像我对我的魅力一样工作^^

Answer 6

这是JsFiddle example

 $(function () {  
    $('.unit').on('change', function () { 
        var units = 0;         
        $('.unit').each(function (index, value) {
            var unit = parseInt($(value).val(),10);
            units += unit;
            if(units >= 4 || units === 1) {
                $('form > button').prop('disabled', true);
            } else {
                $('form > button').prop('disabled', false);
            }         
        }); 
    });
});