|
Сообщение от SLameN
|
|
Как добавить class к <a> в блоке pagination, когда пользователь ничего не выбрал в input в одном из блоков question-1 или 2 или 3 и т.д.?
|
Как вариант...
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=windows-1251' />
<script src='http://code.jquery.com/jquery-latest.js'></script>
<!--
<script src="https://code.angularjs.org/1.3.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.3.9/angular-route.js"></script>
<link rel='stylesheet type=text/css href=tmp.css' />
<link rel="stylesheet/less" type="text/css" href="style.less">
<script src="http://cdnjs.cloudflare.com/ajax/libs/less.js/2.5.0/less.min.js"></script>
-->
<style type='text/css'>
.no {
color: red;
}
</style>
<script type='text/javascript'>
$(function(){
$('button').click(function(){
$('.pagination a').removeClass('no');
$('.pagination a').each(function(){
var name=$(this).attr('href').split('#')[1];
var o=$('[name="'+name+'"]:checked');
if (o.length==0) {
$(this).addClass('no');
};
});
});
});
</script>
</head>
<body>
<div class='test-data'>
<div class='question' data-id='1' id='question-1'>
<p class='q'>Вопрос 1</p>
<p class='a'><input type='radio' id='answer-1' name='question-1' value='1'>
<label for='answer-1'>Ответ 1</label></p>
<p class='a'><input type='radio' id='answer-2' name='question-1' value='2'>
<label for='answer-2'>Ответ 2</label></p>
<p class='a'><input type='radio' id='answer-3' name='question-1' value='3'>
<label for='answer-3'>Ответ 3</label></p>
</div>
<div class='question' data-id='2' id='question-2'>
<p class='q'>Вопрос 2</p>
<p class='a'><input type='radio' id='answer-4' name='question-2' value='4'>
<label for='answer-4'>Ответ 1</label></p>
<p class='a'><input type='radio' id='answer-5' name='question-2' value='5'>
<label for='answer-5'>Ответ 2</label></p>
</div>
</div>
<div class="pagination">
<a class="nav-active" href="#question-1">1</a>
<a href="#question-2">2</a>
<a href="#question-5">3</a>
</div>
<button class='center btn' id='btn'>Результаты</button>
</body>
</html>