我有一组按钮和一个bootstrap选择字段，单击前三个按钮时，将禁用选择字段，然后单击第四个按钮时，它将启用
>按钮和选择字段是表单的一部分。当单击前三个按钮之一时，如何禁用验证并将验证消息隐藏在选择字段上？
这是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>
类似的事情应该做技巧：
$('#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