17.03.2017, 22:25
|
Профессор
|
|
Регистрация: 15.09.2015
Сообщений: 180
|
|
События по клике
Задача следующая: таблица разделена на две части. Если в какой-то части отмечено какое-то число, селект разблокируется, но только для той части где отмечено число.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<style>
.table{
border-collapse: collapse;
}
.table td{
border: 1px solid #000;
padding: 10 10;
}
.check{
background: green;
}
.click{
cursor: pointer;
}
</style>
<table class="table">
<tr>
<td rowspan="3">1.</td>
<td class="click">01</td>
<td class="click">02</td>
<td class="click">03</td>
<td class="click">04</td>
<td rowspan="3"><select class="num" disabled><option value=""></option><option value="10">10</option><option value="20">20</option><option value="30">30</option></select></td>
</tr>
<tr>
<td class="click">05</td>
<td class="click">06</td>
<td class="click">07</td>
<td class="click">08</td>
</tr>
<tr>
<td class="click">09</td>
<td class="click">10</td>
<td class="click">11</td>
<td class="click">12</td>
</tr>
<tr>
<td rowspan="3">2.</td>
<td class="click">13</td>
<td class="click">14</td>
<td class="click">15</td>
<td class="click">16</td>
<td rowspan="3"><select class="num" disabled><option value=""></option><option value="10">10</option><option value="20">20</option><option value="30">30</option></select></td>
</tr>
<tr>
<td class="click">17</td>
<td class="click">18</td>
<td class="click">19</td>
<td class="click">20</td>
</tr>
<tr>
<td class="click">21</td>
<td class="click">22</td>
<td class="click">23</td>
<td class="click">24</td>
</tr>
</table>
<script>
$('.click ').on('click', function(){
$(this).toggleClass('check');
$('.num').prop( "disabled", false );
});
</script>
|
|
17.03.2017, 23:02
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,124
|
|
Sav2907,
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<style>
.table{
border-collapse: collapse;
}
.table td{
border: 1px solid #000;
padding: 10 10;
}
.check{
background: green;
}
.click{
cursor: pointer;
}
</style>
<table class="table">
<tr>
<td rowspan="3">1.</td>
<td class="click">01</td>
<td class="click">02</td>
<td class="click">03</td>
<td class="click">04</td>
<td rowspan="3"><select class="num" disabled><option value=""></option><option value="10">10</option><option value="20">20</option><option value="30">30</option></select></td>
</tr>
<tr>
<td class="click">05</td>
<td class="click">06</td>
<td class="click">07</td>
<td class="click">08</td>
</tr>
<tr>
<td class="click">09</td>
<td class="click">10</td>
<td class="click">11</td>
<td class="click">12</td>
</tr>
<tr>
<td rowspan="3">2.</td>
<td class="click">13</td>
<td class="click">14</td>
<td class="click">15</td>
<td class="click">16</td>
<td rowspan="3"><select class="num" disabled><option value=""></option><option value="10">10</option><option value="20">20</option><option value="30">30</option></select></td>
</tr>
<tr>
<td class="click">17</td>
<td class="click">18</td>
<td class="click">19</td>
<td class="click">20</td>
</tr>
<tr>
<td class="click">21</td>
<td class="click">22</td>
<td class="click">23</td>
<td class="click">24</td>
</tr>
</table>
<script>
var tr = $(".table tbody tr");
$(".num").each(function(indx, sel) {
var cl = $(".click", tr.slice(indx * 3, indx * 3 + 3)).on("click", function() {
$(this).toggleClass("check");
var disabled = !cl.is(".check");
$(sel).prop("disabled", disabled)
})
});
</script>
Последний раз редактировалось рони, 18.03.2017 в 00:19.
|
|
17.03.2017, 23:25
|
Профессор
|
|
Регистрация: 15.09.2015
Сообщений: 180
|
|
Супер, а можно чтобы после двойного клика по номеру, селект снова блокировался?
|
|
17.03.2017, 23:32
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,124
|
|
Sav2907,
можно, но бесполезно, вы алгоритм продумайте получше
|
|
17.03.2017, 23:42
|
Профессор
|
|
Регистрация: 15.09.2015
Сообщений: 180
|
|
рони,
да как же получше?
|
|
17.03.2017, 23:48
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,124
|
|
Sav2907,
номерков много и чего с этим делать?
|
|
17.03.2017, 23:54
|
Профессор
|
|
Регистрация: 15.09.2015
Сообщений: 180
|
|
рони,
Номерков много, потому что это будет выборка из базы данных. что можно придумать?
|
|
18.03.2017, 00:02
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,124
|
|
Sav2907,
что вы хотите сделать мне неизвестно, но вы похоже упускаите возможность накликать по разным номерам, что делать в таком случае и уточните что такое двойной клик по номеру, может второй клик?
|
|
18.03.2017, 00:14
|
Профессор
|
|
Регистрация: 15.09.2015
Сообщений: 180
|
|
да, второй клик, когда никакой номер не будет выбран. После выбора варианта из селекта, номера которые были выбраны, отправляются аяксом в другую базу
|
|
18.03.2017, 00:17
|
Профессор
|
|
Регистрация: 15.09.2015
Сообщений: 180
|
|
если кликнуть по номеру, активируется селект, если еще раз кликнуть по тому же номеру, селект должен блокироваться
|
|
|
|