Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 18.04.2014, 23:04
Интересующийся
Отправить личное сообщение для eFusion Посмотреть профиль Найти все сообщения от eFusion
 
Регистрация: 18.04.2014
Сообщений: 13

Много select-ов и много кнопок
Доброго времени суток!
Есть задача:
на странице, формируемой динамически есть такое:
<tr>  
              <th>Логин</th>  
              <th>ФИО</th>  
              <th>Адрес</th>  
              <th>Дата</th>  
            </tr>
            <tr>  
              <td>d_20538</td>  
              <td>Вася Василий Василий</td>  
              <td>Цветочная 34</td>  
              <td>27 мая 2013</td>
            </tr>
            <tr>
              <td>
                <p>Оценка:</p>
              </td>
              <td>
                <select id="1">
                  <option selected="selected"></option>
                  <option>1</option>
                  <option>2</option>
                  <option>3</option>
                  <option>4</option>
                  <option>5</option>
                </select>
              </td>
              <td>
                <p>Оценка:</p>
                <select id="2">
                  <option selected="selected"></option>
                  <option>1</option>
                  <option>2</option>
                  <option>3</option>
                  <option>4</option>
                  <option>5</option>
                </select>
                <p>Оценка:</p>
                <select id="3">
                  <option selected="selected"></option>
                  <option>1</option>
                  <option>2</option>
                  <option>3</option>
                  <option>4</option>
                  <option>5</option>
                </select>
              </td>
              <td><button type="button" disabled="disabled" id="continue"> Готово</button></td>
            </tr>

и таких блоков может быть 100.
У каждого блока своя кнопка и по 3 селекта. Дабы не отправить пустое значение в базу и затеял активацию кнопки. По дефолту все кнопки неактивны.
Вопрос:
можно ли как-то после выбора в 3х селектах значения активировать кнопку, именно ту, к которой относятся эти селекты?
Знаю, идея такой верстки может и абсурд, но что есть - то есть.
Дайте совет.
Спасибо.
Ответить с цитированием
  #2 (permalink)  
Старый 18.04.2014, 23:25
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,085

eFusion,

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script>
 $(function () {
           $("table tr").each(function (indx, element) {
               var $selects = $("select", this),
                   $button = $("button", this);
               $selects.on("change", function () {
                   var disabled = $selects[0].value && $selects[1].value && $selects[2].value
                   $button.prop({
                       disabled: !disabled
                   })
               })

           });
       })
  </script>
</head>

<body>
 <table><tr>
              <th>Логин</th>
              <th>ФИО</th>
              <th>Адрес</th>
              <th>Дата</th>
            </tr>
            <tr>
              <td>d_20538</td>
              <td>Вася Василий Василий</td>
              <td>Цветочная 34</td>
              <td>27 мая 2013</td>
            </tr>
            <tr>
              <td>
                <p>Оценка:</p>
              </td>
              <td>
                <select id="1">
                  <option selected="selected"></option>
                  <option>1</option>
                  <option>2</option>
                  <option>3</option>
                  <option>4</option>
                  <option>5</option>
                </select>
              </td>
              <td>
                <p>Оценка:</p>
                <select id="2">
                  <option selected="selected"></option>
                  <option>1</option>
                  <option>2</option>
                  <option>3</option>
                  <option>4</option>
                  <option>5</option>
                </select>
                <p>Оценка:</p>
                <select id="3">
                  <option selected="selected"></option>
                  <option>1</option>
                  <option>2</option>
                  <option>3</option>
                  <option>4</option>
                  <option>5</option>
                </select>
              </td>
              <td><button type="button" disabled="disabled" id="continue"> Готово</button></td>
            </tr><tr>
              <th>Логин</th>
              <th>ФИО</th>
              <th>Адрес</th>
              <th>Дата</th>
            </tr>
            <tr>
              <td>d_20538</td>
              <td>Вася Василий Василий</td>
              <td>Цветочная 34</td>
              <td>27 мая 2013</td>
            </tr>
            <tr>
              <td>
                <p>Оценка:</p>
              </td>
              <td>
                <select id="1">
                  <option selected="selected"></option>
                  <option>1</option>
                  <option>2</option>
                  <option>3</option>
                  <option>4</option>
                  <option>5</option>
                </select>
              </td>
              <td>
                <p>Оценка:</p>
                <select id="2">
                  <option selected="selected"></option>
                  <option>1</option>
                  <option>2</option>
                  <option>3</option>
                  <option>4</option>
                  <option>5</option>
                </select>
                <p>Оценка:</p>
                <select id="3">
                  <option selected="selected"></option>
                  <option>1</option>
                  <option>2</option>
                  <option>3</option>
                  <option>4</option>
                  <option>5</option>
                </select>
              </td>
              <td><button type="button" disabled="disabled" id="continue"> Готово</button></td>
            </tr>
 </table>

</body>
</html>
Ответить с цитированием
  #3 (permalink)  
Старый 18.04.2014, 23:35
Интересующийся
Отправить личное сообщение для eFusion Посмотреть профиль Найти все сообщения от eFusion
 
Регистрация: 18.04.2014
Сообщений: 13

Спасибо огромное. Я еще не очень въехал в jquery(к сожалению ). Спасибо еще раз
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Метод для конвертирования едениц px, em, %, pt. jegit Элементы интерфейса 0 07.03.2013 16:15
Как сохранить предыдущее значение select? MaxD Общие вопросы Javascript 3 21.07.2011 12:36
Чудеса математики js при padding borovik Элементы интерфейса 6 09.07.2011 22:02
Проблема с динамическим формированием select elepsion jQuery 1 31.10.2010 14:31
select multiple передать много значений Mozger Events/DOM/Window 3 22.05.2010 02:43