I have implemented a set of checkboxes styled as Bootstrap buttons in order to give them a different look from the standard checkboxes. Below is the code snippet:
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary" id="area_selection_checkbox">
<input type="checkbox" ng-model="study_area.a" ng-true-value="'design'" autocomplete="off"/> Design
</label>
<label class="btn btn-primary" id="area_selection_checkbox">
<input type="checkbox" ng-model="study_area.b" ng-true-value="'economics'" autocomplete="off"> Economics
</label>
<label class="btn btn-primary" id="area_selection_checkbox">
<input type="checkbox" ng-model="study_area.c" ng-true-value="'management'" autocomplete="off"> Management
</label>
<label class="btn btn-primary" id="area_selection_checkbox">
<input type="checkbox" ng-model="study_area.d" ng-true-value="'marketing'" autocomplete="off"> Marketing
</label>
<label class="btn btn-primary" id="area_selection_checkbox">
<input type="checkbox" ng-model="study_area.e" ng-true-value="'software engineering'" autocomplete="off"> Software engineering
</label>
<label>
<input type="checkbox" ng-model="softskill_filter.e" ng-true-value="'creativity'"/>
Creativity
</label>
<tt>value1 = {{study_area}}</tt><br/>
</div>
It's worth noting that the only checkbox without a class or ID is the one that actually functions properly. And here is the CSS for the buttons:
#area_selection_checkbox {
border-radius: 0;
width: 200px;
margin: 1px;
display: block;
cursor: pointer;
background-color: #EDF1F5;
border-color: #EDF1F5;
color: #787985;
font-weight: 500;
outline: none !important;
padding: 10px 12px;
border: none;
}
#area_selection_checkbox.active, #area_selection_checkbox:active,
#area_selection_checkbox.active:hover, #area_selection_checkbox:active:hover{
background-color: #787985;
border-color: #787985;
color: #FFFFFF;
}
#area_selection_checkbox:hover, #area_selection_checkbox:focus {
background-color: #E1E6ED;
border-color: #E1E6ED;
color: #787985;
}
However, I am facing an issue where clicking on the buttons does not update the ng-model, almost like the checkbox functionality isn't recognized at all.
Even though the code for the ng-model is present on the page, it appears to have no effect:
<tt>value1 = {{study_area}}</tt><br/>
Could there be something missing in my implementation? Just so you know, I am utilizing Bootstrap 3.3.7. Thank you.