Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 17.03.2017, 22:25
Профессор
Отправить личное сообщение для Sav2907 Посмотреть профиль Найти все сообщения от Sav2907
 
Регистрация: 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>
Ответить с цитированием
  #2 (permalink)  
Старый 17.03.2017, 23:02
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,109

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.
Ответить с цитированием
  #3 (permalink)  
Старый 17.03.2017, 23:25
Профессор
Отправить личное сообщение для Sav2907 Посмотреть профиль Найти все сообщения от Sav2907
 
Регистрация: 15.09.2015
Сообщений: 180

Супер, а можно чтобы после двойного клика по номеру, селект снова блокировался?
Ответить с цитированием
  #4 (permalink)  
Старый 17.03.2017, 23:32
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,109

Sav2907,
можно, но бесполезно, вы алгоритм продумайте получше
Ответить с цитированием
  #5 (permalink)  
Старый 17.03.2017, 23:42
Профессор
Отправить личное сообщение для Sav2907 Посмотреть профиль Найти все сообщения от Sav2907
 
Регистрация: 15.09.2015
Сообщений: 180

рони,
да как же получше?
Ответить с цитированием
  #6 (permalink)  
Старый 17.03.2017, 23:48
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,109

Sav2907,
номерков много и чего с этим делать?
Ответить с цитированием
  #7 (permalink)  
Старый 17.03.2017, 23:54
Профессор
Отправить личное сообщение для Sav2907 Посмотреть профиль Найти все сообщения от Sav2907
 
Регистрация: 15.09.2015
Сообщений: 180

рони,
Номерков много, потому что это будет выборка из базы данных. что можно придумать?
Ответить с цитированием
  #8 (permalink)  
Старый 18.03.2017, 00:02
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,109

Sav2907,
что вы хотите сделать мне неизвестно, но вы похоже упускаите возможность накликать по разным номерам, что делать в таком случае и уточните что такое двойной клик по номеру, может второй клик?
Ответить с цитированием
  #9 (permalink)  
Старый 18.03.2017, 00:14
Профессор
Отправить личное сообщение для Sav2907 Посмотреть профиль Найти все сообщения от Sav2907
 
Регистрация: 15.09.2015
Сообщений: 180

да, второй клик, когда никакой номер не будет выбран. После выбора варианта из селекта, номера которые были выбраны, отправляются аяксом в другую базу
Ответить с цитированием
  #10 (permalink)  
Старый 18.03.2017, 00:17
Профессор
Отправить личное сообщение для Sav2907 Посмотреть профиль Найти все сообщения от Sav2907
 
Регистрация: 15.09.2015
Сообщений: 180

если кликнуть по номеру, активируется селект, если еще раз кликнуть по тому же номеру, селект должен блокироваться
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
свойства объекта события Morr123 Элементы интерфейса 3 10.08.2016 06:36
При клике появлялся новый элемент (бесконечно) Eadweard Элементы интерфейса 3 16.02.2016 08:13
Запрет события Click на дочернем элементе, кот. находится за рамками родителя Smokvin Events/DOM/Window 11 10.11.2013 01:53
Интерактивная карта мира на jQuery - замена события при клике jacob0013 jQuery 2 28.05.2013 13:30
Дебаг js, или как найти обработчик события для тега jimm88 Events/DOM/Window 1 18.04.2012 15:11