0

我有一组按钮和一个引导选择字段，当单击前三个按钮时，选择字段被禁用，当单击第四个按钮时，它变为启用

按钮和选择字段是表单的一部分。单击前三个按钮之一时，如何禁用验证并隐藏选择字段上的验证消息？

这是 HTML，因此您可以了解它

<!DOCTYPE html>
<html lang="en">
<head>

    <style>
        #contact_form .btn-group .form-control-feedback {
            top: 0;
            right: -40px;
        }
        #success_message{ display: none;}
        .outputs {
            background-color: cornflowerblue;
        }
        .outputs_unit {
            background-color: aquamarine;
        }
    </style>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Bootstrap css -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <!-- JQuery -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <!-- Bootstrap javascript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <!-- Bootstrap Validator -->
    <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.3/css/bootstrapValidator.min.css"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-validator/0.5.3/js/bootstrapValidator.js"></script>
    <!-- Google Maps API -->
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB03tJHy5QUZ_L3bjn3ehSkFE5QVrcSlLo&libraries=places"></script>
    <!-- Latest compiled and minified CSS for bootstrap select-->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/css/bootstrap-select.min.css">
    <!-- Latest compiled and minified JavaScript for bootstrap select-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/js/bootstrap-select.min.js"></script>

    <script>
        /* When the document gets ready */
        $(document).ready (
            function() {
                // Validation settings
                var validation_settings = {
                    excluded: [':disabled'],
                    feedbackIcons: {
                        valid: 'glyphicon glyphicon-ok',
                        validating: 'glyphicon glyphicon-refresh'
                    },
                    fields: {
                        "Truck Options": {
                            excluded: false,
                            validators: {
                                callback: {
                                    message: 'please select truck option',
                                    callback: function (value, validator, $field) {
                                        var options = validator.getFieldElements("Truck Options").val();
                                        return (options != null && options.length === 1);
                                    }
                                }
                            }
                        },
                        Truck: {
                            validators: {
                                notEmpty: {
                                    message: '  Please choose a truck type',
                                }
                            }
                        }
                    }
                };

                // Enable validation for the form
                var form_validation = $('#contact_form').bootstrapValidator(validation_settings);

                // revalidate everytime the select field is enabled
                $('#bootstrapSelectForm').find('[name="Truck Options"]').selectpicker().change(function(e) {
                    $('#bootstrapSelectForm').form_validation('revalidateField', 'Truck Options');
                }).end().form_validation;

                // Enable and disable the select field based on the button clicked
                $('.btn').on('click', function(){
                    var clicked_button = this.id;
                    if ( clicked_button === "53 foot reefer") {
                        truck_price_bool = false;
                        $('#truck_options_title').prop('disabled', false);
                        $('#truck_options_title').selectpicker({'title': clicked_button});
                        $('#truck_options_title').selectpicker('refresh');
                    }
                    else {
                        $('#truck_options_title').prop('disabled', true);
                        $('#truck_options_title').selectpicker('deselectAll');
                        $('#truck_options_title').selectpicker({'title': 'Choose from truck options'});
                        $('#truck_options_title').selectpicker('refresh');
                        truck_price_bool = true;
                    }
                });


            });
    </script>

</head>
<body>

<div class="container-fluid">

    <form class="pc_prevent_submit well form-horizontal" action="welcome.php" method="post"  id="contact_form" data-toggle="validator">
        <fieldset>
            <!-- Truck type choice -->
            <div class="form-group">
                <label class="col-md-4 control-label">Truck type</label>
                <div class="btn-group col-md-8" data-toggle="buttons">
                    <label id='Box truck' class="btn btn-primary">
                        <input type="radio" name="Truck" id="option1" autocomplete="off" value="Box truck" required> Box truck
                    </label>
                    <label id="Dry van" class="btn btn-primary">
                        <input type="radio" name="Truck" id="option2" autocomplete="off" value="Dry van"> Dry van
                    </label>
                    <label id="Flat bed" class="btn btn-primary">
                        <input type="radio" name="Truck" id="option3" autocomplete="off" value="Flat bed"> Flat bed
                    </label>
                    <label id="53 foot reefer" class="btn btn-primary"> 53 foot reefer
                        <input type="radio" name="Truck" id="option4" autocomplete="off" value="53 foot reefer">
                    </label>
                </div>
            </div>

            <!-- Truck options -->
            <div class="form-group">
                <label class="col-md-4 control-label">Truck Options</label>
                <div class="col-md-4">
                    <select name="Truck Options" id="truck_options_title" multiple title="Choose from truck options" class="selectpicker show-tick" data-max-options="1" disabled>
                        <option id="Frozen" title="Frozen">Frozen</option>
                        <option id="Chilled" title="Chilled">Chilled</option>
                    </select>
                </div>
            </div>

            <!-- Book button -->
            <div class="form-group">
                <label class="col-md-4 control-label"></label>
                <div class="col-md-4">
                    <button type="submit" class="btn btn-warning" >Send <span class="glyphicon glyphicon-send"></span></button>
                </div>
            </div>

            <!-- Success message -->
            <div class="form-group">
                <div class="alert alert-success col-md-4 col-md-offset-4" role="alert" id="success_message"><i class="glyphicon glyphicon-thumbs-up"></i> Thank you for your request</div>
            </div>
        </fieldset>
    </form>
</div>
</div><!-- /.container -->

</body>
</html>
4

1 回答 1

0

这样的事情应该可以解决问题：

$('#option1, #option2, #option3').on('click', function() {
    $('#contact_form').bootstrapValidator('enableFieldValidators', 'Truck Options', false);
});
$('#option4').on('click', function() {
    $('#contact_form').bootstrapValidator('enableFieldValidators', 'Truck Options', true);
});

http://formvalidation.io/api/#enable-field-validators

于 2018-06-02T00:32:11.743 回答