JSFiddle - React, Tailwind, and code Playground

by Richard

HTML

<form id="main-form">
  <div class="form-group">
    <select id="notification_property" name="notification[property]">
      <option value="">Select property</option>
      <option value="1">The First Property</option>
      <option value="2">The Second Property</option>
    </select>
    <input type="checkbox" id="notification_allProperties" name="notification[allProperties]" >
  </div>

</form>

JavaScript

var allPropertiesCheckbox = $("#notification_allProperties");
var propertySelectBox = $("#notification_property");

allPropertiesCheckbox.change(function () {
console.log("test");
  var mainForm = $('#main-form');
  if (allPropertiesCheckbox.prop('checked')) {
    console.log('checked');
     mainForm.formValidation('resetField', 'notification[property]');
  } else {
    console.log('unchecked');
    mainForm.formValidation('revalidateField', 'notification[property]');
  }
  
  if (allPropertiesCheckbox.prop('checked')) {
    propertySelectBox.prop('disabled', true);
    propertySelectBox.val('');
  } else {
    propertySelectBox.prop('disabled', false);
  }
}.bind(this));

$('#main-form')
  .formValidation({
  framework: 'bootstrap',
  icon: {
    valid: 'glyphicon glyphicon-ok',
    invalid: 'glyphicon glyphicon-remove',
    validating: 'glyphicon glyphicon-refresh'
  },
  fields: {
    'notification[property]': {
      validators: {
        callback: {
          message: 'Select a property or check the box',
          callback: function(value, validator, $field) {
            var allPropertiesCheckbox = $('#notification_allProperties');
            return (allPropertiesCheckbox.prop('checked')) ? true : (value !== '');
          }
        }
      }
    }
  }
});