<html>
<head>
<title>Тест form</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$.fn.form_menu = function() {
var form = this;
var treeChecks = $('span.tree',form); //массив всех span class='tree' в данной form
var length = treeChecks.length; //Длина массива
function setAttrTree(sw,ThInd){
for(var i=ThInd+1;i<length; i++) { //Перебираем все индексы от следующего за текущим, до конца
var el = $(treeChecks[i]);
el.find('input').attr('disabled',sw);
//el.toggle(!sw); //Показ - Скрытие
if(el.hasClass('all')&&!sw) {sw = el.find('input[type="checkbox"]')[0].checked;}
var str='';if(sw)str ='No Access';
el.find('input[type="text"]').attr('placeholder',str);
if(!sw&&!el.hasClass('all')) {swTH = el.find('input[type="checkbox"]')[0].checked;
var str='';if(swTH)str ='No Access';
el.find('input[type="text"]').attr('disabled',swTH).attr('placeholder',str);
}
}
}
// Первоначальная установка;
var check=$('span.tree.all input[type="checkbox"]:first',form)
setAttrTree(check,0);
$('span.tree.all input[type="checkbox"]',form) .change(function(){ //Cрабатывание onchange для input sel_all
var sw = this.checked;
var ThInd = treeChecks.index($(this).parent()[0]); //Текущий индех данного span в массиве
setAttrTree(sw,ThInd)
});
$('span.tree:not(.all) input[type="checkbox"]',form) .change(function(){//Cрабатывание onchange для любых, кроме input sel_all
var sw = !this.checked;
var str='';if(!sw)str ='No Access';
$(this).parent().find('input[type="text"]').attr('disabled',!sw).attr('placeholder',str);
});
}
</script>
</head>
<body>
<form id='formN1' name='form' action='' method='post'>
<pre>
<span class='tree all'>Не заполнять <input checked type='checkbox' name='sel_all'></span>
<span class='tree'>Вариант 1 <input id='items_1' type='checkbox'> <input type='text'></span>
<span class='tree'>Вариант 2 <input id='items_2' type='checkbox'> <input type='text'></span>
<span class='tree'>Вариант 3 <input id='items_3' type='checkbox'> <input type='text'></span>
<span class='tree all'>Тоже не заполнять <input type='checkbox' name='sel_all'></span>
<span class='tree'>Вариант 1.1 <input id='items_1' type='checkbox'> <input type='text'></span>
<span class='tree'>Вариант 2.1 <input id='items_2' type='checkbox'> <input type='text'></span>
<span class='tree'>Вариант 3.1 <input id='items_3' type='checkbox'> <input type='text'></span>
<span class='tree all'>И это тоже не заполнять <input type='checkbox' name='sel_all'></span>
<span class='tree'>Вариант 1.1 <input id='items_1' type='checkbox'> <input type='text'></span>
<span class='tree'>Вариант 2.1 <input id='items_2' type='checkbox'> <input type='text'></span>
<span class='tree'>Вариант 3.1 <input id='items_3' type='checkbox'> <input type='text'></span>
</pre>
</form>
<form id='formN2' name='form' action='' method='post'>
<pre>
<span class='tree all'>Не заполнять <input checked type='checkbox' name='sel_all'></span>
<span class='tree'>Вариант 1 <input id='items_1' type='checkbox'> <input type='text'></span>
<span class='tree'>Вариант 2 <input checked id='items_2' type='checkbox'> <input type='text'></span>
<span class='tree'>Вариант 3 <input id='items_3' type='checkbox'> <input type='text'></span>
<span class='tree all'>Тоже не заполнять <input checked type='checkbox' name='sel_all'></span>
<span class='tree'>Вариант 1.1 <input id='items_1' type='checkbox'> <input type='text'></span>
<span class='tree'>Вариант 2.1 <input checked id='items_2' type='checkbox'> <input type='text'></span>
<span class='tree'>Вариант 3.1 <input id='items_3' type='checkbox'> <input type='text'></span>
<span class='tree all'>И это тоже не заполнять <input type='checkbox' name='sel_all'></span>
<span class='tree'>Вариант 1.1 <input id='items_1' type='checkbox'> <input type='text'></span>
<span class='tree'>Вариант 2.1 <input checked id='items_2' type='checkbox'> <input type='text'></span>
<span class='tree'>Вариант 3.1 <input id='items_3' type='checkbox'> <input type='text'></span>
</pre>
</form>
<script>
$(document).ready(function(){
$('#formN1').form_menu();
$('#formN2').form_menu();
});
</script>
</body>
</html>