Интересная задача: CheckBox + Span
Вложений: 1
Доброго времени суток.
Столкнулся недавно с интересной задачей, и все никак не могу решить ее. Задание заключается в наделении прав доступа при создании сообщества. Есть три уровня доступа: 1- участник сообщества 2- подписчик 3- пользователь не состоящий в сообществе. http://clip2net.com/s/2SEVi Если активны чекбоксы первого уровня, то соответсвующие чекбоксы 2-го уровня могут нажиматься, если чекбоксы 1 уровня не активны, то нельзя выбрать чекбоксы 2-го. Также если активный чекбокс 2-го уровня, то можно выбрать соответсвующий чекбокс 3-го уровня и наоборот. Так же доступы 1-го уровня имеют свои условия: если не активны чекбоксы в блоке "Посмотреть", то нажать на чекбокс в блоке "Добавить" нельзя. Если чекбокс активний в блоке "Посмотреть" то чекбокс в блоке "Добавить" можно сделать активным. Проблема в том, что верстальщик сверстал чекбоксы так, что они срабатывают при нажатии на span :( и я не могу чекбоксу дать свойство disabled, так как всеравно чекбокс срабатывает при клике на span:
<div class="society_unit_top">
<h4>Участник сообщества</h4>
<div class="society_member_block_1">
<div class="fieldwrapper_7">
<label>Открыть доступ к просмотру:</label>
<div class="thefield_8">
<div class="checkbox_1"><span class="niceCheck">
<input type="checkbox" name="member[p]" checked="checked" value='1'/>
</span>Пост</div>
<div class="checkbox_1"><span class="niceCheck">
<input type="checkbox" name="member[f]" checked="checked" value='1'/>
</span>Фотографии</div>
<div class="checkbox_1"><span class="niceCheck">
<input type="checkbox" name="member[v]" checked="checked" value='1'/>
</span>Видеозаписи</div>
</div>
</div>
</div>
<div class="society_member_block_2">
<div class="fieldwrapper_7">
<label>Открыть доступ к добавлению:</label>
<div class="thefield_8">
<div class="checkbox_1"><span class="niceCheck">
<input type="checkbox" name="member[ap]" checked="checked" value='1'/>
</span>Пост</div>
<div class="checkbox_1"><span class="niceCheck">
<input type="checkbox" name="member[af]" checked="checked" value='1'/>
</span>Фотографии</div>
<div class="checkbox_1"><span class="niceCheck">
<input type="checkbox" name="member[av]" checked="checked" value='1'/>
</span>Видеозаписи</div>
</div>
</div>
</div>
jQuery(document).ready(function(){
jQuery(".niceCheck").mousedown(
/* при клике на чекбоксе меняем его вид и значение */
function() {
changeCheck(jQuery(this));
});
jQuery(".niceCheck").each(
/* при загрузке страницы нужно проверить какое значение имеет чекбокс и в соответствии с ним выставить вид */
function() {
changeCheckStart(jQuery(this));
});
});
function changeCheck(el)
/*
функция смены вида и значения чекбокса
el - span контейнер дял обычного чекбокса
input - чекбокс
*/
{
var el = el,
input = el.find("input").eq(0);
if(!input.attr("checked")) {
el.css("background-position","0 13px");
input.attr("checked", true);
input.attr("value", '1');
} else {
el.css("background-position","0 0");
input.attr("checked", false);
input.attr("value", '0');
}
return true;
}
Подскажите в каком направлении копать, какие у кого есть мысли? |
angek,
Ссылка на действующую страницу есть ? |
Цитата:
|
angek,
Выложите zip страницы (чорт до чего сервис дошел, верстальщики на локалхосте уже кому-то делают - и почём ? |
Вложений: 1
Цитата:
|
Если доступа к просмотру: нет - доступ к добавлению: активен ?
|
Цитата:
|
Нету ни у кого каких то предложений?
|
Цитата:
Ничего особо сложного пока не вижу... |
Цитата:
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<!--
<link rel="stylesheet" type="text/css" href="tmp.css" />
-->
<style type="text/css">
label {
display: block;
}
label + label {
margin-top: 5px;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
$('input:checkbox').change(function (){
if (this.checked) {
open($(this).data('child'));
} else {
close($(this).data('child'));
};
});
});
function open(Name) {
$('.o-'+Name).attr('disabled',false);
};
function close(Name) {
$('.'+Name).attr({
disabled: true,
checked: false
});
};
</script>
</head>
<body>
<div ="lv-1">
<h1>Уровень 1</h1>
<label><input type="checkbox" data-child='typ-1-1' />1-1</label>
<label><input type="checkbox" data-child='typ-1-2' />1-2</label>
</div>
<div ="lv-2">
<h1>Уровень 2</h1>
<label><input class='typ-1-1 o-typ-1-1' disabled type="checkbox" data-child='typ-2-1' />2-1</label>
<label><input class='typ-1-2 o-typ-1-2' disabled type="checkbox" data-child='typ-2-2' />2-2</label>
</div>
<div ="lv-3">
<h1>Уровень 2</h1>
<label><input class='typ-1-1 typ-2-1 o-typ-2-1' disabled type="checkbox" />3-1</label>
<label><input class='typ-1-2 typ-2-2 o-typ-2-2' disabled type="checkbox" />3-2</label>
</div>
</body>
</html>
|
| Часовой пояс GMT +3, время: 00:17. |