I have designed custom checkboxes and radio buttons with CSS styling as shown below:
input[type="checkbox"]:checked + label:after,
input[type="checkbox"][checked="checked"] + label:after,
input[type="radio"][checked="checked"] + label:after,
input[type="radio"]:checked + label:after {
position: absolute;
display: block;
float: left;
height: 10px;
width: 10px;
top: 4px;
left: -19px;
z-index: 2;
background: #b7b7b7;
content: "";
}
input[type="checkbox"]:checked + label:after,
input[type="checkbox"][checked="checked"] + label:after {
background: none;
top: 1px;
left: -20px;
font-family: 'FontAwesome';
font-size: 12px;
color: #b7b7b7;
content: "\f00c";
}
The HTML structure for these elements is like this:
<div class="checkbox" ng-repeat="group in groups.initData.groups"
ng-checked="groups.modalData.access_groups[$index+1]">
<input type="checkbox"
class="group-checkbox">
<label><% group.group %> </label>
</div>
To initialize them, I use the following JQuery code when my Angular view loads:
$('.checkbox').click(function () {
if ($(this).children('input').prop("disabled"))
return;
if ($(this).children('input').prop("checked"))
$(this).children('input').prop("checked", false);
else
$(this).children('input').prop("checked", true);
$(this).children('input').change();
});
/* Radio handler */
$('.radio').click(function () {
if ($(this).children('input').prop("disabled"))
return;
var name = $(this).children('input').attr("name");
$(this).children('input[name="' + name + '"]').prop("checked", false);
$(this).children('input').prop("checked", true);
$(this).children('input').change();
});
I am facing an issue where the styling does not seem to be applied. Despite the Angular code correctly adding the checked attribute to the elements that meet the condition.