I have utilised bootstraps button style checkboxes in a Vue JS project of mine, which works correctly and as it should, however, I want the button style checkboxes variant to change from outline-secondary to success when clicked.

Could someone please advise on how this could be achieved?

Below is a code snippet showing the options defaulted to the outline-secondary variant.

<template>
  <div>
    <b-form-group>
      <b-form-checkbox-group v-model="selected"
                             buttons
                             button-variant="outline-secondary"
                             name="buttons2"
                             :options="options">
      </b-form-checkbox-group>
    </b-form-group>
  </div>
</template>

<script>
export default {
  data () {
    return {
      selected: [],
      options: [
        {text: '1 week', value: '1 week'},
        {text: '1 month', value: '1 month'},
        {text: '1 year', value: '1 year'},
        {text: '1 decade', value: '1 decade'}
      ]
    }
  }
}
</script>

Any help would be hugely appreciated.

Cheers,

Ant

I have utilised bootstraps button style checkboxes in a Vue JS project of mine, which works correctly and as it should, however, I want the button style checkboxes variant to change from outline-secondary to success when clicked.

Could someone please advise on how this could be achieved?

Below is a code snippet showing the options defaulted to the outline-secondary variant.

<template>
  <div>
    <b-form-group>
      <b-form-checkbox-group v-model="selected"
                             buttons
                             button-variant="outline-secondary"
                             name="buttons2"
                             :options="options">
      </b-form-checkbox-group>
    </b-form-group>
  </div>
</template>

<script>
export default {
  data () {
    return {
      selected: [],
      options: [
        {text: '1 week', value: '1 week'},
        {text: '1 month', value: '1 month'},
        {text: '1 year', value: '1 year'},
        {text: '1 decade', value: '1 decade'}
      ]
    }
  }
}
</script>

Any help would be hugely appreciated.

Cheers,

Ant

• javascript
• twitter-bootstrap
• vue.js
• vuejs2

1 Answer 1

My quickest solution for this would be:

  <div class="my-buttons">
    <b-form-group>
      <b-form-checkbox-group v-model="selected"
                             buttons
                             button-variant="outline-secondary"
                             name="buttons2"
                             :options="options">
      </b-form-checkbox-group>
    </b-form-group>
  </div>


<style>
  .my-buttons .active {
    color: #fff !important;
    background-color: #28a745 !important;
    border-color: #28a745 !important;
  }
</style>

I have added parent class my-buttons and overlapped class .active. Because your checkbox will get that .active class when you click on it and it bees checked.