Question

允许用户在5个输入框中输入信息。

我希望只允许用户回答表单中的3个问题，并且当他回答自己选择的3个问题时，表单中的其余输入文本字段（框）将被禁用。

<html>    
<h1>Security Questions</h1>
<body>
<p>
Only Enter Answer 3 Security Questions.
</p>
<form action="/submitAnswer.php" method="POST">

<label>What City Was Your Mom Born In?</label><br>
<input type="text" id="secQuestion01" name="secQuestion01"><br>

<label>What Is Your Dream Car?</label><br>
<input type="text" id="secQuestion02" name="secQuestion02"><br>

<label>What Is Your Mother's Maidan Name?</label><br>
<input type="text" name="secQuestion03"><br>

<label>What's Your Dream Job?</label><br>
<input type="text" name="secQuestion04"><br>

<label>Name Your First Grade Teacher?</label><br>
<input type="text" name="secQuestion05"><label><br>

<label>Name Your First Pet?</label><br>
<input type="text" name="secQuestion01"><label><br>
</form>
</body>
</html>

Answer 1

您可以在每个keypress上附加一个input事件监听器，并在其他input中添加新输入时增加全局变量。如果变量等于3，则禁用所有其他input。如果要允许用户删除他们对一个问题的答案并回答另一个问题，则需要为每个输入添加一个keydown事件监听器，并且该事件的keyCode为8（退格键）），当前输入值的长度为1，然后启用所有其他input。

<html>  
<body>
<h1>Security Questions</h1>
<p>
Only Enter Answer 3 Security Questions.
</p>
<form action="/submitAnswer.php" method="POST" id="questionForm">

<label>What City Was Your Mom Born In?</label><br>
<input type="text" id="secQuestion01" name="secQuestion01"><br>

<label>What Is Your Dream Car?</label><br>
<input type="text" id="secQuestion02" name="secQuestion02"><br>

<label>What Is Your Mother's Maidan Name?</label><br>
<input type="text" name="secQuestion03"><br>

<label>What's Your Dream Job?</label><br>
<input type="text" name="secQuestion04"><br>

<label>Name Your First Grade Teacher?</label><br>
<input type="text" name="secQuestion05"><label><br>

<label>Name Your First Pet?</label><br>
<input type="text" name="secQuestion01"><label><br>
</form>
<script>
var inputs = document.querySelectorAll('#questionForm input');
var entered = [];
var numOfEntered = 0;
for(let i = 0; i < inputs.length; i++){
  entered[i] = false;
  inputs[i].addEventListener("keypress", function(e){
      if(!entered[i]){
        entered[i] = true;
        numOfEntered++;
        if(numOfEntered==3){
          for(let j = 0; j < entered.length; j++){
            if(!entered[j]){
              inputs[j].disabled = true;
            }
          }
        }
      }
  });
  inputs[i].addEventListener("keydown", function(e){
    if(e.keyCode==8&&this.value.length==1){
      entered[i] = false; 
      numOfEntered--;
      for(let z = 0; z < entered.length; z++){
        inputs[z].disabled = false;
      }
    }
  });
}
</script>
</body>
</html>

Answer 2

以下内容将满足您的需求：

$(function () {

  $('input').on('focusout', function () {
    
    var $inputs = $('input');
    
    var numAnswered = $inputs.filter(function () {
      return $(this).val() !== '';
    }).length;
    
    $.each($inputs, function () {
      if (numAnswered < 3) {
        $(this).prop('disabled', false);
      } else {
        if (!$(this).val()) {
          $(this).prop('disabled', true);
        }
      }
    });
    
    
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>    
<body>
<h1>Security Questions</h1>
<p>
Only Enter Answer 3 Security Questions.
</p>
<form action="/submitAnswer.php" method="POST">

<label>What City Was Your Mom Born In?</label><br>
<input type="text" id="secQuestion01" name="secQuestion01"><br>

<label>What Is Your Dream Car?</label><br>
<input type="text" id="secQuestion02" name="secQuestion02"><br>

<label>What Is Your Mother's Maidan Name?</label><br>
<input type="text" name="secQuestion03"><br>

<label>What's Your Dream Job?</label><br>
<input type="text" name="secQuestion04"><br>

<label>Name Your First Grade Teacher?</label><br>
<input type="text" name="secQuestion05"><label><br>

<label>Name Your First Pet?</label><br>
<input type="text" name="secQuestion01"><label><br>
</form>
</body>
</html>

一旦使用一定数量的文本框，如何禁用未使用的文本框的输入？

2 个答案: