Интересная задача: 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> |
Если кому то понадобиться, сделал, не знаю по "фен-шую" ли, но как то так
var checkboxMemberView=$('.society_member_block_1 span.niceCheck'); var checkboxMemberAdd=$('.society_member_block_2 > div > div > div > span'); var checkboxSub=$('.society_subscriber > div > div > div > span'); var checkboxGuest=$('.society_not_member > div > div > div > span'); checkboxMemberView.live('click', function(){ $(this).each(function(){ var eqEl=checkboxMemberView.index($(this)); console.log(eqEl); if($(this).find('input').is(':checked')){ checkboxMemberAdd.eq(eqEl).removeAttr('class').css("background-position","0 0").attr('class','niceCheck'); checkboxSub.eq(eqEl).removeAttr('class').css("background-position","0 0").attr('class','niceCheck'); }else{ checkboxMemberAdd.eq(eqEl).removeAttr('class').removeAttr('style').attr('class','niceCheck_dis'); checkboxMemberAdd.eq(eqEl).find('input').removeAttr('checked').val(0); checkboxSub.eq(eqEl).removeAttr('class').removeAttr('style').attr('class','niceCheck_dis'); checkboxSub.eq(eqEl).find('input').removeAttr('checked').val(0); checkboxGuest.eq(eqEl).removeAttr('class').removeAttr('style').attr('class','niceCheck_dis'); checkboxGuest.eq(eqEl).find('input').removeAttr('checked').val(0); } }) }) checkboxSub.live('click', function(){ $(this).each(function(){ var eqEl=checkboxSub.index($(this)); console.log(eqEl); if($(this).find('input').is(':checked')){ checkboxGuest.eq(eqEl).removeAttr('class').css("background-position","0 0").attr('class','niceCheck'); }else{ checkboxGuest.eq(eqEl).removeAttr('class').removeAttr('style').attr('class','niceCheck_dis'); checkboxGuest.eq(eqEl).find('input').removeAttr('checked').val(0); } }) }) |
Цитата:
|
Цитата:
|
Цитата:
Ты мой пример выше смотрел? |
Цитата:
|
angek,
Ежли без оптимизации и то можно и с закрытыми span <!DOCTYPE HTML> <html> <head> <meta name="keywords" content="" /> <meta name="description" content="" /> <meta name="author" content="fergie" /> <title>Сообщество создать</title> <link rel="stylesheet" type="text/css" href="css/style.css"/> <link rel="stylesheet" type="text/css" href="css/reset.css"/> <!--[if lte IE 8]> <link rel="stylesheet" href="css/ie.css" type="text/css" /> <![endif]--> <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script> <style> /*Новый класс для установки отобр. галки на span*/ .niceCheck.checked{ background-position:0 -13px; } </style> <script> (function (){ $(document).ready(function(){ //Установка/cнятие класса у span.niceCheck и checked в checkbox; function set_unsetChecked(elem,val){ var checkbox = elem.find('input[type="checkbox"]'); if(val){ checkbox.attr('checked',true);elem.addClass('checked');//alert(elem.attr('class')) } else {checkbox.removeAttr('checked');elem.removeClass('checked');} } //Cкрытие/показ полей отмеченных checkbox; function setUnlock(wrpClass){//alert('wrpClass='+wrpClass) var st=+wrpClass[1].slice(6); if(st!=1){ //Исключаем влияние "Открыть доступ к добавлению:" st++; if(st>wrpDivL) return; for(var i=st;i<wrpDivL;i++){ if(!wrpClass[3]){$('div.'+wrpClass[2]+'.prior_'+i).hide();continue;} var prevCheck = $('div.'+wrpClass[2]+'.prior_'+(i-1)+':visible'); //Виден ли предыдущий соответствующий чекбокс ? if(i==2)prevCheck = $('div.'+wrpClass[2]+'.prior_0:visible'); //Исключаем влияние "Открыть доступ к добавлению:" var Check = !!prevCheck.find('span.niceCheck input[type="checkbox"]').attr('checked'); //Включен ли предыдущий соответствующий чекбокс ? if(prevCheck.length&&Check)$('div.'+wrpClass[2]+'.prior_'+i).show(); } } } //Установка классов в div.checkbox_1, согласно установочным приоритетам; var CheckArray = $('div.thefield_8 span.niceCheck input[type="checkbox"]'); var Leng = $('div.thefield_8:first span.niceCheck input[type="checkbox"]').length; var wrpDivL; CheckArray.each(function(ind){ CheckClassIndex ='prior_'+parseInt(ind/Leng)+ ' check-' + (ind % Leng); $(this).parents('div.checkbox_1').addClass(CheckClassIndex) wrpDivL = parseInt(ind/Leng)+1; }); //Установка исходного отображения страницы, согласно чекбоксам (function (){ var arrcheck = $('div.checkbox_1 span.niceCheck input[type="checkbox"]'); var arrLng = arrcheck.length; for(var i=0;i<arrLng;i++){//alert(i) var elem =$('.checkbox_1.prior_'+parseInt(i/Leng)+'.check-'+(i % Leng)).find('span.niceCheck input[type="checkbox"]'); var val = !!elem.attr('checked'); if(val)elem.parent().addClass('checked'); var wrpClass =['checkbox_1','prior_'+parseInt(i/Leng),'check-'+(i % Leng),val]; setUnlock(wrpClass); } })(); //Onclick по span.niceCheck; $('span.niceCheck').on('click',function(){//alert('span.niceCheck'); var val=true;if($(this).hasClass('checked'))val=false; set_unsetChecked($(this),val); //Устанавливаем галки и checked/(none checked) в checkbox; var wrpClass = $(this).parents('.checkbox_1').attr('class').split(/\s+/g); wrpClass.push(val);setUnlock(wrpClass); //Устанавливаем видимость последующих чекбоксов; return false; }); }); })(); </script> </head> <body > <div class="main novosti"> <h2>Создание сообщества</h2> <div class="create_society"> <input type="text" placeholder="Название"/> <div class="fieldwrapper_16"> <label>Добавить аватар:</label> <div class="thefield_17"> <input type="file" class="file_input" size="83" /> <div class="mask"> <input type="text" class="file_input_text" placeholder="Выбрать фотографию"/> </div> </div> </div> <div class="society_avatar_choose"><img src="img/society_logo.png" width="120" height="120" /> <a class="society_delete_avatar"></a> </div> <textarea placeholder="Описание сообщества"></textarea> <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" checked="checked"/> </span>Пост</div> <div class="checkbox_1"><span class="niceCheck"> <input type="checkbox" checked="checked"/> </span>Фотографии</div> <div class="checkbox_1"><span class="niceCheck"> <input type="checkbox" /> </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" checked="checked"/> </span>Пост</div> <div class="checkbox_1"><span class="niceCheck"> <input type="checkbox" checked="checked"/> </span>Фотографии</div> <div class="checkbox_1"><span class="niceCheck"> <input type="checkbox" /> </span>Видеозаписи</div> </div> </div> </div> </div> <div class="society_unit"> <div class="society_subscriber"> <h4>Подписчик</h4> <div class="fieldwrapper_7"> <label>Открыть доступ к просмотру:</label> <div class="thefield_8"> <div class="checkbox_1"><span class="niceCheck"> <input type="checkbox" checked="checked"/> </span>Пост</div> <div class="checkbox_1"><span class="niceCheck"> <input type="checkbox" checked="checked"/> </span>Фотографии</div> <div class="checkbox_1"><span class="niceCheck"> <input type="checkbox" /> </span>Видеозаписи</div> </div> </div> </div> <div class="society_not_member"> <h4>Пользователь не состоящий в сообществе</h4> <div class="fieldwrapper_7"> <label>Открыть доступ к просмотру:</label> <div class="thefield_8"> <div class="checkbox_1"><span class="niceCheck"> <input type="checkbox"/> </span>Пост</div> <div class="checkbox_1"><span class="niceCheck"> <input type="checkbox"/> </span>Фотографии</div> <div class="checkbox_1"><span class="niceCheck"> <input type="checkbox" /> </span>Видеозаписи</div> </div> </div> </div> </div> <a href="#" class="btn_society">Создать</a> </div> </div> </div> </div> </div> </body> </html> Текущие скрипты пока убрал (*Галки с Пользователь не состоящий в сообществе лучше изначально снять(что и сделал |
Цитата:
|
Часовой пояс GMT +3, время: 21:00. |