Question

我有以下问题：

我有一个包含3个输入字段类型编号的表单。我希望在任何时候都只需要2个。因此，如果输入A和输入B被填充，则输入C被禁用。但是当用户清除输入A时，输入C必须可用。等等。所以2必须填写，无论哪两个！

我为毕达哥拉斯的理论做了一个小小的应用程序＆＃34;在哪里可以填写双方。哪两个方面都没关系。

<div class="selector">
    <input type="number" placeholder="A" name="A" id="A">
    <input type="number" placeholder="B" name="B" id="B">
    <input type="number" placeholder="C" name="C" id="C">
</div>

jQuery验证：

$(".selector").validate({
  rules: {
    // simple rule, converted to {required:true}
    A: "required",
    B: "required",
    C: "required"
  }
});

谁能帮助我！

Answer 1

我建立在sumeet的答案之上。此代码应该完全正常运行：

＆＃13;

$(document).on("change",".selector input",function(e){
    var emptyFields = Array();
    
    $(".selector input").each(function(i){  
        if(!this.value)
        {
            emptyFields.push(this.getAttribute("id"));
        }            
    });
    
    if(emptyFields.length === 1)
    {
        $("#"+emptyFields[0]).attr('readonly', true);
    }
    else
    {
        emptyFields.forEach(function(id) {
            $("#"+id).attr('readonly', false) ;
        });
    }   
});

＆＃13;

<div class="selector">
    <input type="number" placeholder="A" name="A" id="A">
    <input type="number" placeholder="B" name="B" id="B">
    <input type="number" placeholder="C" name="C" id="C">
</div>

＆＃13;

Answer 2

根据您使用的技术，有两种方法可以满足您的要求。如果你正在计算某个值，你可能需要一个函数让它说为calc（）。

首先，更简单的方法是在＆＃34;点击＆＃34;一些事件元件。在这种情况下，而不是分配必需的属性每个元素，只需在计算前检查多少填充价值观存在。
可以调用calc（）的第二个点是change（）或on 具有某些特定类的每个元素的按键事件。

此功能可用于上述两种情况

function validator(){
    var fields = $(".selector").children();
    var lv,counter=0;
    for(lv=0;lv<fields.length;lv++){
        if($(ss[lv]).val()==""){
            counter++;
        }
    }
    return counter>=2;
}

以下是一些示例用法：

：

$("#btnCalc").on("click",function(){
    if(!validator()){
        DO YOUR CALC
    }else{
        alert("Atleast two fields are required to be filled");
    }
    return false;
});

：

$(".selector").change(function(){
    if(!validator()){
        //DO YOUR CALC
    }
    else{
        errorDiv.val="Atleast two fields are required to be filled"; //pseudo code :)
    }
    //console.log(fields.length);
    return false;
});

这是一个快速响应，可以使用全局变量优化代码

Answer 3

您可以使用以下代码添加/删除验证 -

根据需要添加B，因为这将始终可用

$(".selector").validate({
  rules: {
    // simple rule, converted to {required:true}
    B: "required"
  }
});

现在根据A

中的值添加/删除所需的验证

$('input[name="A"]').keyup(function(){
   if($(this).val().trim()=="")
  {
    $(this).rules("remove", "required");
    $('input[name="C"]').rules("add", "required");
    $('input[name="C"]').removeProp('disabled');
  }
  else
  {
    $(this).rules("add", "required");
    $('input[name="C"]').rules("remove", "required");
    $('input[name="C"]').prop('disabled',true);
  }
}):

Answer 4

$(document).on("change",".selector input",function(e){
    $(".selector input").attr('readonly', false) ; 
    var flag = 0;
    var id;
    debugger;
    $(".selector input").each(function(i){

        if(this.value!="")
        {
            flag++;
        }
        else
        {            
            id  = this.getAttribute("id");
        }    

    });

    if(flag == 2)
        $("#"+id).attr('readonly', true) ;
    else
        $("#"+id).attr('readonly', false) ;

});

我已更新链接，只需检查 - ＆gt; http://jsfiddle.net/sumeetp1991/dvdvye4p/3/

jQuery Validate - 多个输入字段 - 有些是必需的

4 个答案: