JSFiddle - React, Tailwind, and code Playground
HTML
<div class="label_btn_group" data-label-opacity="0.70">
<label class="radio-inline btn btn-primary btn-sm label_btn3">
<input type="radio" name="empresa_tipo" id="empresa_tipo1" value="0"> Matriz
</label>
<label class="radio-inline btn btn-primary btn-sm label_btn2">
<input type="radio" name="empresa_tipo" id="empresa_tipo2" value="1"> Filial
</label>
</div>
<hr>
<div class="label_btn_group" data-label-opacity="0.20">
<label class="radio-inline btn btn-primary btn-sm label_btn2">
<input type="checkbox" name="empresa_tipo20" id="empresa_tipo1" value="2"> Matriz
</label>
<label class="radio-inline btn btn-primary btn-sm label_btn3">
<input type="checkbox" name="empresa_tipo21" id="empresa_tipo2" value="3"> Filial
</label>
</div>
<hr>
<div class="label_btn_group" data-label-opacity="0.50">
<label class="radio-inline btn btn-primary btn-sm label_btn2">
<input type="radio" name="empresa_tipo2" id="empresa_tipo1" value="2"> Matriz
</label>
<label class="radio-inline btn btn-primary btn-sm label_btn3">
<input type="radio" name="empresa_tipo2" id="empresa_tipo2" value="3"> Filial
</label>
</div>
CSS
.opacity-030{
opacity: 0.3;
}
.opacity-050{
opacity: 0.5;
}
.opacity-060{
opacity: 0.6;
}
.opacity-070{
opacity: 0.6;
}
.label_btn2{
background-color: rgba(255,0,0,.3) !important;
}
.label_btn3{
background-color: rgba(0, 255,0,.3) !important;
}
JavaScript
$(document).ready(function () {
$("div.label_btn_group input[type='radio']" || "div.label_btn_group input[type='checkbox']").on("click",function(e){
var tagv = $(this);
var tagclicked = tagv.is(':checked');
var tagOpVals1 = tagv.parent().attr('data-label-opacity');
var tagOpVals2 = tagv.parent().parent().attr('data-label-opacity');
var tagOpVals3 = tagv.parent().parent().parent().attr('data-label-opacity');
if(tagOpVals1){
tagOpVal = tagOpVals1;
} else if(tagOpVals2){
tagOpVal = tagOpVals2;
} else if(tagOpVals3){
tagOpVal = tagOpVals3;
} else {
tagOpVal = 0.75;
}
console.log(tagoVal);
if(tagclicked === true){
$(this).parent(this).parent().find("label").css("opacity",tagOpVal);
$(this).parent(this).css("opacity","1");
}
});
});