Много 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х селектах значения активировать кнопку, именно ту, к которой относятся эти селекты? Знаю, идея такой верстки может и абсурд, но что есть - то есть. Дайте совет. Спасибо. |
eFusion,
:cray:
<!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>
|
Спасибо огромное. Я еще не очень въехал в jquery(к сожалению:( ). Спасибо еще раз
|
| Часовой пояс GMT +3, время: 21:43. |