Question

我有一个非常noob的问题，我有一个带输入字段的表单。表单有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.因为你反击字段。我认为这应该是因为测试目的而被忽视。一旦删除了这个字段，maxallwoed就可以设置为3

仅允许填写x个表单字段

2 个答案: