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