Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 14.06.2013, 07:44
Профессор
Отправить личное сообщение для Гробовщик Посмотреть профиль Найти все сообщения от Гробовщик
 
Регистрация: 10.03.2013
Сообщений: 169

Активировать текстовое поле если стоит галочка (запара с именами)
Здравствуйте.
Застопорился на куске кода 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;

                                                                       })

                                                });

                                       } 

                                            })
Ответить с цитированием
  #2 (permalink)  
Старый 14.06.2013, 07:56
Аватар для Hekumok
Отправить личное сообщение для Hekumok Посмотреть профиль Найти все сообщения от Hekumok
 
Регистрация: 03.06.2012
Сообщений: 513

$(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;

                                                                       })

                                                });

                                       } 

                                            })
__________________
★ ²º¹³ ☆
Ответить с цитированием
  #3 (permalink)  
Старый 14.06.2013, 08:07
Профессор
Отправить личное сообщение для Гробовщик Посмотреть профиль Найти все сообщения от Гробовщик
 
Регистрация: 10.03.2013
Сообщений: 169

Hekumok,
Все поля стали нактивными и совсем не реагируют на галочки(
Ответить с цитированием
  #4 (permalink)  
Старый 14.06.2013, 08:27
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

Дай общий признак этим чекбоксам. Оберни каждую пару чекбокс + инпут (хотя не обязательно). Включи мозг наконец.


<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>
Ответить с цитированием
  #5 (permalink)  
Старый 14.06.2013, 08:44
Профессор
Отправить личное сообщение для Гробовщик Посмотреть профиль Найти все сообщения от Гробовщик
 
Регистрация: 10.03.2013
Сообщений: 169

danik.js,
На счёт мозга хороший совет, очень плохо знаю js, в процессе так сказать начала изучения, а jquery всегда недолюбливал (библиотека несомненно хорошая, но если, например, со старой версией JQ работает, то если новую закачать то вероятность 90%, что работать не будет)
И не боясь показаться дебилом спрошу что означает $ ?
Ответить с цитированием
  #6 (permalink)  
Старый 14.06.2013, 08:52
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,220

<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>

Последний раз редактировалось Deff, 14.06.2013 в 08:57.
Ответить с цитированием
  #7 (permalink)  
Старый 14.06.2013, 08:56
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

Сообщение от Гробовщик
со старой версией JQ работает, то если новую закачать то вероятность 90%
Так можно сказать о любой библиотеке, да и вообще программном продукте. Процент кстати намного ниже. Ну и никто ведь не заставляет обновляться.

То же самое, но без 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>
Ответить с цитированием
  #8 (permalink)  
Старый 14.06.2013, 09:26
Профессор
Отправить личное сообщение для Гробовщик Посмотреть профиль Найти все сообщения от Гробовщик
 
Регистрация: 10.03.2013
Сообщений: 169

Сообщение от danik.js
Дай общий признак этим чекбоксам. Оберни каждую пару чекбокс + инпут (хотя не обязательно). Включи мозг наконец.
В FireFox код обрабатывается быстро, в остальных браузерах оооооооочень медленно, даже в хроме. Библиотеку долго тянет, скопировал на диск всё стало отлично

Последний раз редактировалось Гробовщик, 14.06.2013 в 09:30.
Ответить с цитированием
  #9 (permalink)  
Старый 14.06.2013, 09:37
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

Сообщение от Гробовщик
В FireFox код обрабатывается быстро, в остальных браузерах оооооооочень медленно, даже в хроме. Библиотеку долго тянет, скопировал на диск всё стало отлично
На хостинге все будет с точностью наоборот.
Ответить с цитированием
  #10 (permalink)  
Старый 14.06.2013, 09:39
Профессор
Отправить личное сообщение для Гробовщик Посмотреть профиль Найти все сообщения от Гробовщик
 
Регистрация: 10.03.2013
Сообщений: 169

danik.js,
Deff,
Спасибо за помощь, буду сейчас сидеть разбирать коды по ниточкам=). Хорошие коды, а мне есть куда стремиться
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Получить координаты курсора в текстовом поле в пикселях prike Events/DOM/Window 4 23.05.2013 03:35