Problem with select chained with formvalidation plugin

I have a chained select that is disabled in the hierarchical order of the selects and does not activate the submit, unless all the selections are full.

Everything is fine there, the problem arises when I add the formvalidation plugin, it is more an aesthetic error, because I want it to mark error when a select is disabled, but it does not, in case it fills the three fields and remove the second select, as it is in hierarchical order, it should mark error with the third select, but it does not.

Here is the code.

HTML

<div class="container">
  <div class="row">
    <div class="col-xs-12">
      <h1 class="page-header">jQuery Chained Select</h1>
    </div>
  </div>
  <div class="row">
    <div class="col-xs-3">
      <form action="" id="addToCart">
        <div class="form-group">
          <select name="size" id="size" class="form-control">
            <option value="">Size</option>
            <option value="Small">Small</option>
            <option value="Medium">Medium</option>
            <option value="Large">Large</option>
            <option value="X-Large">X-Large</option>
          </select>
        </div>
        <div class="form-group">
          <select name="color" id="color" class="form-control" disabled>
            <option value="">Color</option>
            <option value="Red">Red</option>
            <option value="Blue">Blue</option>
            <option value="Green">Green</option>
          </select>
        </div>
        <div class="form-group">
          <select name="qty" id="qty" class="form-control" disabled>
            <option value="">Quantity</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
          </select>
        </div>
        <div class="form-group">
          <button type="submit" id="submit" class="btn btn-default" disabled><i class="glyphicon glyphicon-shopping-cart"></i> Add to Cart</button>
        </div>
      </form>
    </div>
  </div>
</div>

Jquery

function chainSelect(current, target){
  var value1 = $(current).on('change', function(){
    if($(this).find(':selected').val() != '') {
      $(target).removeAttr('disabled');
      var value = $(this).find(':selected').text();
    } else {
      $(current).parent().nextAll().find('select, button').prop('disabled', 'disabled').val(null);
    }
  return value;
  });
  return value1;
}
size = chainSelect('#size', '#color');
color = chainSelect('#color', '#qty');
qty = chainSelect('#qty', '#submit');
$('#addToCart').submit(function(){
  event.preventDefault();
  alert('Size: ' + size + '\nColor: ' + color + '\nQuantity: ' + qty);
});
$(document).ready(function () {
            $('#addToCart')
             .formValidation({
                 excluded: ':disabled',
                 framework: 'bootstrap',
                 icon: {
                     valid: 'glyphicon glyphicon-ok',
                     invalid: 'glyphicon glyphicon-remove',
                     validating: 'glyphicon glyphicon-refresh'
                 },
                 fields: {
                    color: {
                         validators: {
                             notEmpty: {
                                 message: 'This field is required'
                             }
                         }
                     },
                     size: {
                         validators: {
                             notEmpty: {
                                 message: 'This field is required'
                             }
                         }
                     },
                                                              qty: {
                         validators: {
                             notEmpty: {
                                 message: 'This field is required'
                             }
                         }
                     }        
                 }
            })
});

Here is the link to code in codepen