Question

我正在努力避免验证混乱并使用内联验证。我有一个复选框，后面跟着三个输入框。如果选中该复选框，则输入字段必须变为“＃34; required＆＃34;”。否则不是。

以下是代码：

＆＃13;

<div class="col-xs-12">
    <div class="form-group">
        <label class="checkbox-inline">
        <input type="checkbox" id="vi" name="vi" checked="checked">
            I have Apple
        </label>
    </div>
</div>

<div class="col-xs-6">
    <div class="form-group">
        <label>Apple condition?</label> 
        <input type="input" class="form-control" id="appleCond" validate="required:'checkbox[name=vi][value=Yes]:checked'">
    </div>
</div>

<div class="col-xs-6">
    <div class="form-group">
        <label>Sourced from ?</label> 
        <input type="input" class="form-control" id="appleSource" validate="required:'checkbox[name=vi][value=Yes]:checked'">
    </div>
</div>

<div class="col-xs-6">
    <div class="form-group">
        <label>Quantity</label> 
        <input type="input" class="form-control" id="appleQuantity" validate="required:'checkbox[name=vi][value=Yes]:checked'">
    </div>
</div>
</div>

＆＃13;

我确信我的语法有问题。任何人都可以指出正确的语法吗？

Answer 1

那么这可以通过以下方式完成。默认情况下，将复选框设为未选中状态，然后将jquery写入

    $(document).ready(function(){
      var atLeastOneIsChecked = $('input[name="vi"]:checked').length > 0;
       if(atLeastOneIsChecked){
        $("input").attr("required", "true");
      }
    else {
        // else do what you need to do with this case
    }
});

Answer 2

除了复选框div之外，将课程提供给其他div，例如＆＃34; check_1＆＃34;。

HTML：

 <div class="col-xs-12">
    <div class="form-group">
        <label class="checkbox-inline">
            <input type="checkbox" id="vi" name="vi" />
            I have Apple
        </label>
    </div>
</div>

<div class="col-xs-6 check_1">
    <div class="form-group">
        <label>Apple condition?</label> 
        <input type="input" class="form-control  input_val" id="appleCond" validate="required"/>
    </div>
</div>

<div class="col-xs-6 check_1">
    <div class="form-group">
        <label>Sourced from ?</label> 
        <input type="input" class="form-control input_val" id="appleSource" validate="required"/>
    </div>
</div>

<div class="col-xs-6 check_1">
    <div class="form-group">
        <label>Quantity</label> 
        <input type="input" class="form-control  input_val" id="appleQuantity" validate="required"/>
    </div>
</div>

<div>
    <input type="button" value="submit" id="button_submit"/>
</div>

JS：

var check_box=0;
$(".check_1").hide();


 $('#button_submit').click(function() {
    if(check_box==true)
    {

        $(".input_val").prop('required',true);



    }
     else
     {
        // code when checkbox not selected
     }

});


$('input[name="vi"]').click(function() {

        if ($(this).is(':checked')) {
           $(".check_1").show();
            check_box=true;
        }
    else{
             $(".check_1").hide();
            check_box=false;
    }
});

check it here

Jquery输入验证取决于复选框值

2 个答案: