Javascript 单选按钮使用jquery和boostrapvalidator隐藏和显示div

我需要div在页面加载时保持隐藏。如果用户单击“是”，我希望div显示；如果用户单击“否”或“不确定”，我需要它保持隐藏；如果div隐藏，我不希望验证隐藏部分。我的代码不起作用，我知道我做错了什么，我知道它可以更简洁。请有人给我介绍一下，或者给我举个例子

<form action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>" id="rsvpform" method= "POST" class="form-horizontal">
    <div class="form-group">
    <p>Will you be attending?</p>
    <div class="form-group">
        <label class="col-sm-2 control-label"></label>
            <div class="col-sm-4">
                <div class="btn-group" data-toggle="buttons">
                    <label class="btn btn-default">
                        <input type="radio" autocomplete="off" name="attending" value="Yes" required /> Yes
                                </label>
                                <label class="btn btn-default">
                                    <input type="radio" autocomplete="off" name="attending" value="No" required /> No
                                </label>
                                <label class="btn btn-default">
                                    <input type="radio" autocomplete="off" name="attending" value="Not Sure" required /> Not Sure
                                </label>
                                <span class="error"><?php echo $attendErr;?></span>
                            </div>
                        </div>
                    </div>
                    <!--This here is the div i want to be hidden on load ad accesed upon clicking the Yes radio button-->
                    <div id = "relation" style = "display: none;">
                        <p>Who are you related to?</p>
                        <div class="form-group">
                            <label class="col-sm-2 control-label"></label>
                            <div class="col-sm-4">
                                <div class="btn-group">
                                    <label class="btn btn-default">
                                        <input type="radio" autocomplete="off" name="family" value="Bride" required />Bride
                                    </label>
                                    <label class="btn btn-default">
                                        <input type="radio" autocomplete="off" name="family" value="Groom" required />Groom
                                    </label>
                                    <label class="btn btn-default">
                                        <input type="radio" autocomplete="off" name="family" value="Friend" required />Friend
                                    </label>
                                    <span class="error"><?php echo $famErr;?></span>
                                </div>
                            </div>
                        </div>
                        <p>Guests in your party, including yourself: </P>
                        <div class = "form-group">
                            <label class="control-label col-sm-4"></label>
                            <div class="col-xs-2">
                                <input type = "text" class = "form-control" name="num" placeholder = "0" required />
                            <span class="error"><?php echo $numErr;?></span>
                            </div>
                        </div>
                    </div> <!-- end of relation-->
                    <div class="form-group">        
                        <div class="col-sm-offset-2 col-sm-6">
                            <button type="submit" class="btn btn-primary">Submit</button>
                        </div>
                    </div>  
                </form>

---

}))

您可以使用禁用的

属性，以便验证器不会检查验证。哪个div？你能不能把这个删减一点，让大家知道什么东西不适合你expect@FrayneKonok，我使用的是来自boostrapValidator API的disableSubmitbuttons（false）。我只是不确定是否可以在变量中加入类似于toggle的函数。@DarrenSweeney。。现在好点了吗？@Juice还有很多东西需要通读——你能做一个引导吗？这是我们可以测试的方法
$(document).ready(function() {
$('#rsvpform').bootstrapValidator({
    message: 'This value is not valid',
    feedbackIcons: {
        valid: 'glyphicon glyphicon-ok',
        invalid: 'glyphicon glyphicon-remove',
        validating: 'glyphicon glyphicon-refresh'
    },
    // Since the Bootstrap Button hides the radio and checkbox
    // We exclude the disabled elements only
    fields: {
        excluded: ':disabled',
        num:{
            validators:{
                digits:{
                    message:'The number is not valid'
                }
            }
        }
    }
})
// This here is the function I'm trying to use to gethide and show accomplished
.find("input[name=attending]:radio")
        .on('click', function() {
            if($(this).attr("value")=="Yes"){
                $('#relation').show(fast);
            } 
            if($(this).attr("value")=="No"){
                $('#relation').hide(fast);
            } 
            if($(this).attr("value")=="Not Sure"){
                $('#relation').hide(fast);
            } 

            // Show or hide the additional fields
            // They will or will not be validated based on their visibilities
            $target = $(#relation).toggle();
            if (!$target.is(':visible')) {
                // Enable the submit buttons in case additional fields are not valid
                $('#rsvpform').data('bootstrapValidator').disableSubmitButtons(false);
                //var $attend = $('input[name=attending]:checked').val();
            }
        });