具有隐藏字段的复选框的Bootstrap formvalidation

Question

我使用带有formvalidation.io的Bootstrap 3.3.2。在选中相关复选框后出现的每个复选框后面，我都有一组隐藏文本字段的复选框。文本字段具有notempty验证，复选框的验证至少选中了1个复选框。

当我选中一个复选框时，它会使用复选标记符号验证为绿色。当我单击第二个复选框时，复选标记符号保持不变，但它会变为黑色。如何使用其他复选标记使验证保持绿色？

这是HTML：

<form id="defaultForm" class="form-horizontal" role="form" method="post" action="">
  <div class="panel panel-default">
    <div class="panel-body">
      <div class="form-group">
        <label class="col-sm-3 control-label">Checkboxes With Hidden Fields</label>
        <div class="col-sm-7">
          <div class="checkbox">
            <label><input type="checkbox" id="checkboxes1" name="checkboxes[]" value="Checkbox 1">Checkbox 1</label>
          </div>
          <div class="form-group hidden" id="hidden_checkbox1_field">
            <div class="col-sm-12">
              <input type="text" class="form-control" id="checkbox1_field" name="checkbox1_field">
            </div>
          </div>
          <div class="checkbox">
            <label><input type="checkbox" id="checkboxes2" name="checkboxes[]" value="Checkbox 2">Checkbox 2</label>
          </div>
          <div class="form-group hidden" id="hidden_checkbox2_field">
            <div class="col-sm-12">
              <input type="text" class="form-control" id="checkbox2_field" name="checkbox2_field">
            </div>
          </div>
          <div class="checkbox">
            <label><input type="checkbox" id="checkboxes3" name="checkboxes[]" value="Checkbox 3">Checkbox 3</label>
          </div>
          <div class="form-group hidden" id="hidden_checkbox3_field">
            <div class="col-sm-12">
              <input type="text" class="form-control" id="checkbox3_field" name="checkbox3_field">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</form>

这里是验证/隐藏字段控件JS：

$(document).ready(function() {
  $('#defaultForm').formValidation({
    framework: 'bootstrap',
    message: 'This value is not valid',
    icon: {
      valid: 'glyphicon glyphicon-ok',
      invalid: 'glyphicon glyphicon-remove',
      validating: 'glyphicon glyphicon-refresh'
    },
    fields: {
      "checkbox1_field": {
        validators: {
          notEmpty: {
            message: 'Field Required'
          }
        }
      },
      "checkbox2_field": {
        validators: {
          notEmpty: {
            message: 'Field Required'
          }
        }
      },
      "checkbox3_field": {
        validators: {
          notEmpty: {
            message: 'Field Required'
          }
        }
      },
      "checkboxes[]": {
        validators: {
          choice: {
              min: 1,
              message: 'Not enough checks'
          }
        }
      }
    }
  });

  $("#checkboxes1").change(function() {
    if ($(this).prop('checked')) {
      $("#hidden_checkbox1_field").removeClass("hidden");
      $('#defaultForm').formValidation('addField', 'checkbox1_field');
    } else {
      $("#hidden_checkbox1_field").addClass("hidden");
      $('#defaultForm').formValidation('resetField', 'checkbox1_field');
    }
  });

  $("#checkboxes2").change(function() {
    if ($(this).prop('checked')) {
      $("#hidden_checkbox2_field").removeClass("hidden");
      $('#defaultForm').formValidation('addField', 'checkbox2_field');
    } else {
      $("#hidden_checkbox2_field").addClass("hidden");
      $('#defaultForm').formValidation('resetField', 'checkbox2_field');
    }
  });

  $("#checkboxes3").change(function() {
    if ($(this).prop('checked')) {
      $("#hidden_checkbox3_field").removeClass("hidden");
      $('#defaultForm').formValidation('addField', 'checkbox3_field');
    } else {
      $("#hidden_checkbox3_field").addClass("hidden");
      $('#defaultForm').formValidation('resetField', 'checkbox3_field');
    }
  });
});