Активировать текстовое поле если стоит галочка (запара с именами)
Здравствуйте.
Застопорился на куске кода php работает а вот js работает не корректно Суть такова есть чекбокс и текстовое поле, Если стоит галочка в чекбоксе, то текстовое поле становиться активным в противном случае нет Сколько будет строк заранее неизвестно (их составляет скрипт) поэтому имена выглядят: "#continue1 #agree1", "#continue2 #agree2" и т.д. Не могу заставит скрипт прописывать имена и что бы при этом он работал, т.е. автоматом прописывал имена для каждого отдельного поля
$i=1;
$material = mysql_query ("SELECT * FROM `material` where `id`=".$zay['id_mater']."") or die (mysql_error());
while ($mat = mysql_fetch_array($material))
{ //например выводим много данных
echo "<input type='checkbox' name='".$zay['id_mater']."' value='а1' id='agree".$i."'>".$mat['name']."<br>"; //всем по чекбоксу id='agree".$i."'
echo "<input onclick='this.select();' type='text' id='continue".$i."' value='Введите число' /><br>"; //тут текстовые поля и id='continue".$i."'
$i++;
}
Вот проблемный скрипт:
$(document).ready(function(){
for (var i = 1; i <= 10; i++){
$('#continue+i').prop('disabled', true);
$('#agree+i').change(function() {
$('#continue+i').prop('disabled', function(i, val) {
return !val;
})
});
}
})
|
$(document).ready(function(){
for (var i = 1; i <= 10; i++){
$('#continue'+i).prop('disabled', true);
$('#agree'+i).change(function() {
$('#continue'+i).prop('disabled', function(i, val) {
return !val;
})
});
}
})
|
Hekumok,
Все поля стали нактивными и совсем не реагируют на галочки( |
Дай общий признак этим чекбоксам. Оберни каждую пару чекбокс + инпут (хотя не обязательно). Включи мозг наконец.
<div>
<input type="checkbox" class="input-toggler" />
<input type="text" disabled="" />
<div>
<div>
<input type="checkbox" class="input-toggler" />
<input type="text" disabled="" />
<div>
<div>
<input type="checkbox" class="input-toggler" />
<input type="text" disabled="" />
<div>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$('.input-toggler').click(function(){
var $input = $(this).next('input[type="text"]');
$input.prop('disabled', !$input.prop('disabled'));
})
</script>
|
danik.js,
На счёт мозга хороший совет, очень плохо знаю js, в процессе так сказать начала изучения, а jquery всегда недолюбливал (библиотека несомненно хорошая, но если, например, со старой версией JQ работает, то если новую закачать то вероятность 90%, что работать не будет) И не боясь показаться дебилом спрошу что означает $ ? |
<script type="text/javascript" src="http://yandex.st/jquery/1.7.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('input[id^="agree"]').each(function(){
var nextInp = $(this).next().next('input[id^="continue"]');
nextInp.attr('disabled',true);
$(this).change(function() {
if($(this).attr('checked')){nextInp.removeAttr('disabled');
} else nextInp.attr('disabled',true);
//Еще коды...
});
});
});
</script>
<input type="checkbox" name="agree1" value="а1" id="agree1">".$mat["name"].<br>
<input onclick="this.select();" type="text" id="continue1" value="Введите число" /><br>
<input type="checkbox" name="agree2" value="а2" id="agree2">".$mat["name"].<br>
<input onclick="this.select();" type="text" id="continue2" value="Введите число" /><br>
<input type="checkbox" name="agree3" value="а3" id="agree3">".$mat["name"].<br>
<input onclick="this.select();" type="text" id="continue3" value="Введите число" /><br>
|
Цитата:
То же самое, но без jQuery (возможно не будет работать в IE8):
<div>
<input type="checkbox" class="input-toggler" />
<input type="text" disabled="" />
<div>
<div>
<input type="checkbox" class="input-toggler" />
<input type="text" disabled="" />
<div>
<div>
<input type="checkbox" class="input-toggler" />
<input type="text" disabled="" />
<div>
<script>
(function(){
var togglers = document.querySelectorAll('.input-toggler');
var handler = function() {
var input = this.parentNode.querySelector('input[type="text"]');
input.disabled = !this.checked;
};
for (var i = 0; i < togglers.length; i++) {
togglers[i].onchange = handler;
};
})();
</script>
|
Цитата:
|
Цитата:
|
danik.js,
Deff, Спасибо за помощь, буду сейчас сидеть разбирать коды по ниточкам=). Хорошие коды, а мне есть куда стремиться |
| Часовой пояс GMT +3, время: 15:05. |