Форум

eFusion · #1 (**permalink**) 18.04.2014, 23:04

Доброго времени суток!
Есть задача:
на странице, формируемой динамически есть такое:

<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

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>

eFusion · #3 (**permalink**) 18.04.2014, 23:35

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

). Спасибо еще раз

Форум

Справочник

Discord чат

Курсы javascript