Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Интересная задача: CheckBox + Span (https://javascript.ru/forum/dom-window/35927-interesnaya-zadacha-checkbox-span.html)

angek 26.02.2013 23:00

Интересная задача: 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;
}


Подскажите в каком направлении копать, какие у кого есть мысли?

Deff 26.02.2013 23:04

angek,
Ссылка на действующую страницу есть ?

angek 26.02.2013 23:05

Цитата:

Сообщение от Deff (Сообщение 237451)
angek,
Ссылка на действующую страницу есть ?

Нету:( Проект на локалхосте

Deff 26.02.2013 23:09

angek,
Выложите zip страницы (чорт до чего сервис дошел, верстальщики на локалхосте уже кому-то делают - и почём ?

angek 26.02.2013 23:17

Вложений: 1
Цитата:

Сообщение от Deff (Сообщение 237454)
angek,
Выложите zip страницы (чорт до чего сервис дошел, верстальщики на локалхосте уже кому-то делают - и почём ?

Нет, это мы проекты делаем локально, а готовые страницы уже на тест сервер кидаем)

Deff 26.02.2013 23:34

Если доступа к просмотру: нет - доступ к добавлению: активен ?

angek 26.02.2013 23:39

Цитата:

Сообщение от Deff (Сообщение 237465)
Если доступа к просмотру: нет - доступ к добавлению: активен ?

Нет, если чекбокс в Просмотре активен, тогда можно выбрать соответсвующий чекбокс в Добавлении (но можно и не выбрать, ето вже как админ захочет), если не активен то соответсвующий чекбокс в Добавлении выбрать нельзя.

angek 27.02.2013 11:43

Нету ни у кого каких то предложений?

ksa 27.02.2013 13:33

Цитата:

Сообщение от angek
Нету ни у кого каких то предложений?

Сделай тестовый пример где есть все 3 блока с чекбоксами - тогда посмотрим...
Ничего особо сложного пока не вижу...

ksa 27.02.2013 14:15

Цитата:

Сообщение от angek
Подскажите в каком направлении копать

Как вариант...

<!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, время: 11:55.