只允許填寫x個表單域

Question

我有一個很小的問題，我有一個帶有輸入域的表單。該表單有10個字段，用戶需要輸入1-3（一個是最優選的，3個是最後一個選擇）。在3個被填充之後，我想要禁用所有其他字段，或者只是禁止任何進一步的輸入並給出錯誤。

我已經有了計算工作，但我不能限制或彈出一個錯誤。

這裏的代碼，

jQuery(document).ready(function($){ 
 
    $("#choices").on('keyup change', function() { 
 
     var maxAllowed = 3; 
 
     var number = 0; 
 
     $(this).find('input, textarea').each(function() { 
 
      //if (number < maxAllowed && this.value !== '') 
 
      if (this.value !== '') 
 
      { 
 
       $('.input_count').val(number++); 
 
      }   
 
     }); 
 
    }); 
 
    
 
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <div class="row"> 
 
     <div class="col-md-12"> 
 
      <form method="post" id="userForm" role="form"> 
 
       <h3>Selection form</h3> 
 
       <p>Fill in your choices from 1-3 (please select only three).</p> 
 
       <div id="choices"> 
 
        <div class="form-group"> 
 
         <label for="Recreational fishing">Recreational fishing</label> 
 
         <input type="text" value="" size="3" name="form[Recreational fishing]" id="Recreational fishing" class="form-control" /> 
 
        </div> 
 
        <div class="form-group"> 
 
         <label for="Recreational boating">Recreational boating</label> 
 
         <input type="text" value="" size="3" name="form[Recreational boating]" id="Recreational boating" class="form-control" /> 
 
        </div> 
 
        <div class="form-group"> 
 
         <label for="Sightseeing tourist">Sightseeing tourist</label> 
 
         <input type="text" value="" size="3" name="form[Sightseeing tourist]" id="Sightseeing tourist" class="form-control" /> 
 
        </div> 
 
        <div class="form-group"> 
 
         <label for="Exercise">Exercise</label> 
 
         <input type="text" value="" size="3" name="form[Exercise]" id="Exercise" class="form-control" /> 
 
        </div> 
 
        <div class="form-group"> 
 
         <label for="Picnics BBQ">Picnics/BBQ</label> 
 
         <input type="text" value="" size="3" name="form[Picnics BBQ]" id="Picnics BBQ" class="form-control" /> 
 
        </div> 
 
        <div class="form-group"> 
 
         <label for="Sunsets and socialising">Sunsets and socialising</label> 
 
         <input type="text" value="" size="3" name="form[Sunsets and socialising]" id="Sunsets and socialising" class="form-control" /> 
 
        </div> 
 
        <div class="form-group"> 
 
         <label for="Bird watching">Bird watching</label> 
 
         <input type="text" value="" size="3" name="form[Bird watching]" id="Bird watching" class="form-control" /> 
 
        </div> 
 
        <div class="alert alert-info"> 
 
         <div class="form-group"> 
 
         <label for="counter">Counter:</label> 
 
         <input class="input_count form-control" type="text" id="counter" value=""> 
 
        </div> 
 
       </div> 
 
      </div> 
 
      <input type="submit" value="Submit" name="form[Submit]" id="Submit" class="btn btn-primary btn-block"> 
 
     </form> 
 
    </div> 
 
</div>

....還是這裏的小提琴。 http://jsfiddle.net/Flocktome/wmdnnm4j/

任何想法將非常感激。提前致謝。

Answer 1

試試看看這個代碼。我發現使用filter函數填充了多個字段，並在填充允許的最大字段數時使用each禁用了其他字段。 JSFiddle

jQuery(document).ready(function($){ 
    $("#choices").on('keyup', function() { 
     var maxAllowed = 3;   
     var els = $(this).find('input, textarea'); 
     var elsFilled = els.filter(function(i,el){ return el.value!="" }).length; 
     if(elsFilled==maxAllowed) 
      els.each(function(i,el){ if(el.value=="") el.disabled = true; }); 
     else 
      els.each(function(i,el){ if(el.value=="") el.disabled = false; }); 
    }); 
}); 

Answer 2

  jQuery(document).ready(function($){ 
       $("#choices").on('keyup change', function() { 
        var maxAllowed = 4; 
        var number_done = 0; 
        $(this).find('input, textarea').removeAttr('disabled'); 
         $(this).find('input, textarea').each(function() { 
          //if (number < maxAllowed && this.value !== '') 
          if (this.value !== '') 
          { 
           $('.input_count').val(++number_done); 
          }  
         }); 
        if(number_done >= maxAllowed){ 
         $(this).find('input,textarea').filter(function(){ 
          if($(this).val()== '') 
            return true; 
          return false; 
         }).attr('disabled', 'disabled'); 
        } 
       }); 

      }); 

這裏允許設置爲4.由於你對抗field.Which應該ingnored我認爲對於測試purpose.Once這個字段被刪除的maxallwoed可以設置爲3

最大