JSFiddle - React, Tailwind, and code Playground
by Dmitry Maximov
HTML
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<div class="container">
<div class="panel panel-default">
<div class="panel-heading">1. Оформление ЭЦП</div>
<div class="panel-body">
<div class="panel panel-default">
<div class="panel-heading">1.2. Копия СНИЛС</div>
<div class="panel-body">
<div class="comment-template">
<div class="comment-template_title">Комментарий</div>
<div class="comment-template_content">
<input type="text" class="form-control"></div>
<div class="comment-template_action">
<button class="btn btn-primary">Сохранить изменения</button>
</div>
</div><!-- /.comment-template -->
</div><!-- /.panel-body -->
</div><!-- /.panel -->
<div class="panel panel-default">
<div class="panel-heading">Статус</div>
<div class="panel-body">
<div class="form-inline">
<div class="radio radio-info">
<input id="status-01_primary-audit" type="radio" name="status-01">
<label for="status-01_primary-audit">Первичный аудит</label>
</div>
<div class="radio radio-warning">
<input id="status-01_in-work" type="radio" name="status-01">
<label for="status-01_in-work">В работе</label>
</div>
<div class="radio radio-success">
<input id="status-01_completed" type="radio" name="status-01">
<label for="status-01_completed">Выполнен</label>
</div>
</div>
<div class="comment-template">
<div class="comment-template_title">Комментарий</div>
<div class="comment-template_content">
<input type="text" class="form-control" placeholder="Введите текст..."></div>
<div...
CSS
.test {
background: red;
}
JavaScript
$('.radio input').click(function() {
$('.radio input:not(:checked)').parents().eq(5).removeClass("test");
$('.radio input:checked').parents().eq(5).addClass("test");
});