Интересная задача: 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, время: 02:54. |