JSFiddle - React, Tailwind, and code Playground
HTML
<div id="edit-status" class="form-radios">
<div class="form-item form-type-radio form-item-status">
<input type="radio" id="edit-status-0" name="status" value="0" class="form-radio"/>
<label class="option" for="edit-status-0">Bloqueado</label>
</div>
<div class="form-item form-type-radio form-item-status">
<input type="radio" id="edit-status-1" name="status" value="1" checked="checked" class="form-radio"/>
<label class="option" for="edit-status-1">Activo</label>
</div>
</div>
CSS
.form-radios
{
display: block;
float: left;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
font-weight: bold;
text-transform: uppercase;
background: #eee;
border: 1px solid #aaa;
padding: 2px;
box-shadow: inset 0 2px 5px rgba(0,0,0,0.2);
margin-left: 20px;
}
.form-radios input[type=radio]
{
display: none;
}
.form-radios label
{
display: block;
float: left;
padding: 3px 6px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
color: #aaa;
cursor: pointer;
}
.form-radios label:hover
{
text-shadow: 0 0 2px #fff;
color: #888;
}
.form-radios label.checked
{
background: #8fc800;
color: #eee;
text-shadow: 0 -1px 1px rgba(0,0,0,0.5);
background: -webkit-linear-gradient(top, #8fc800, #438c00);
background: -moz-linear-gradient(top, #8fc800, #438c00);
background: -ms-linear-gradient(top, #8fc800, #438c00);
cursor: default;
}
JavaScript
$(".form-radios label:not(.checked)").click(function(){
var label = $(this);
var input = $('#' + label.attr('for'));
if (!input.prop('checked')){
label.closest('.form-radios').find("label").removeClass('checked');
label.addClass('checked');
input.prop('checked', true);
}
});
$(".form-radios input[checked=checked]").each(function(){
$("label[for=" + $(this).attr('id') + "]").addClass('checked');
});