Javascript-форум - События по клике

Javascript-форум (https://javascript.ru/forum/)

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - События по клике (https://javascript.ru/forum/dom-window/67969-sobytiya-po-klike.html)

Sav2907

17.03.2017 22:25

События по клике

Задача следующая: таблица разделена на две части. Если в какой-то части отмечено какое-то число, селект разблокируется, но только для той части где отмечено число.

<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

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>

Sav2907

17.03.2017 23:25

Супер, а можно чтобы после двойного клика по номеру, селект снова блокировался?

рони	17.03.2017 23:32

Sav2907,
можно, но бесполезно, вы алгоритм продумайте получше

Sav2907

17.03.2017 23:42

рони,
да как же получше?

рони	17.03.2017 23:48

Sav2907,
номерков много и чего с этим делать?

Sav2907

17.03.2017 23:54

рони,
Номерков много, потому что это будет выборка из базы данных. что можно придумать?

рони	18.03.2017 00:02

Sav2907,
что вы хотите сделать мне неизвестно, но вы похоже упускаите возможность накликать по разным номерам, что делать в таком случае и уточните что такое двойной клик по номеру, может второй клик?

Sav2907

18.03.2017 00:14

да, второй клик, когда никакой номер не будет выбран. После выбора варианта из селекта, номера которые были выбраны, отправляются аяксом в другую базу

Sav2907

18.03.2017 00:17

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

рони	18.03.2017 00:21

Sav2907,
селект отключается когда нет ни одного зелёного в блоке, смотрите пост №2 снова.

Sav2907

18.03.2017 00:46

рони,
да, это то что нужно, спасибо большое мастер

Sav2907

18.03.2017 17:26

рони,
Еще одно, как сделать если селект заблокирован, его значение равно ""

Sav2907

18.03.2017 17:29

Так?

if(disabled){$(sel).val("")};

рони	18.03.2017 17:57

Sav2907,
проверили? работает как надо, багов нет , значит правильно!!!

Sav2907

18.03.2017 18:15

рони,
Да, работает. Еще одно, как сделать если селект больше 0, то запретить клики по числам, если селект пусто, тогда позволить и снять класс check из всех чисел в блоке

рони	18.03.2017 18:22

Sav2907,
вам об этом говорили ещё в №4 посте

Цитата:

Сообщение от рони

алгоритм продумайте

пишите задание а потом код, если в голове представить все нюансы сложно.

Sav2907

18.03.2017 18:25

рони,
простите, действительно трудно все нюансы заранее продумать.

рони	18.03.2017 18:31

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() {
        var disabled = !cl.is(".check");
        $(this).toggleClass("check",disabled);
        disabled = !cl.is(".check");
        $(sel).prop("disabled", disabled);
        if(disabled){$(sel).val("")};
    })
});
</script>

рони	18.03.2017 18:36

Цитата:

Сообщение от Sav2907

как сделать если селект больше 0, то запретить клики по числам, если селект пусто - позволить?

на самом деле вы наверно хотели это: если уже одно число выбрано, запретить клики по другим числам. пример выше

Sav2907

18.03.2017 18:55

рони,
Нет, выбрать можно все числа в блоке, а когда селект больше 0, то блокировать числа, а когда пусто, тогда снять класс check

рони	18.03.2017 19:10

Sav2907,
не понимаю

Sav2907

18.03.2017 19:19

рони,
Выбираю числа в блоке, например 2 и 4.
Селект разблокируется.
В селект ставлю 10.
Числа блокируются, и я больше ничего не могу выбрать.
Ставлю в селект пусто.
Числа разблокируются.
Все числа белые, и селект снова заблокирован.

рони	18.03.2017 19:41

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() {
        var disabled = !$(sel).val();
        $(this).toggleClass("check",disabled);
        disabled = !cl.is(".check");
        $(sel).prop("disabled", disabled);
        if(disabled){$(sel).val("")};
    })
});
</script>

Sav2907

18.03.2017 19:44

рони,
Нет не то
Выбираю числа в блоке, например 2 и 4.
Селект разблокируется.
В селект ставлю 10.
Числа блокируются, и я больше ничего не могу выбрать.
Ставлю в селект пусто.
Числа разблокируются.
Все числа белые, и селект снова заблокирован.

рони	18.03.2017 19:44

Sav2907,
далее сами

Sav2907

18.03.2017 19:49

После того как я выбрал число в селект, все числа от 1 до 12 блокируются.
Ставлю селект на пусто, и из всех чисел от 1 до 12 снимается класс check
И селект снова блокируется

рони	18.03.2017 20:06

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() {
        if(sel.value) return;
        $(this).toggleClass("check");
        var disabled = !cl.is(".check");
        $(sel).prop("disabled", disabled);
    })
$(sel).on("change", function() {
  !sel.value && cl.removeClass("check") && $(sel).prop("disabled", true);
})

});
</script>

Sav2907

18.03.2017 20:08

рони,
Вот, вот это оно, СПАСИБО

Sav2907

18.03.2017 20:15

Последнее:
как при клике по числу, например от 1-12 получити класс abc? Для примера можно алертом

<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 colspan="6" align="center" class="abc">1-12</td></tr>
  <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 colspan="6" align="center" class="abc">13-24</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 * 4, indx * 4 + 4)).on("click", function() {
        if(sel.value) return;
        $(this).toggleClass("check");
        var disabled = !cl.is(".check");
        $(sel).prop("disabled", disabled);
    })
$(sel).on("change", function() {
  !sel.value && cl.removeClass("check") && $(sel).prop("disabled", true);
})

});
</script>

рони	18.03.2017 20:46

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 colspan="6" align="center" class="abc">1-12</td></tr>
  <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 colspan="6" align="center" class="abc">13-24</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 * 4, indx * 4 + 4)).on("click", function() {
        if(sel.value) return;
        alert($("td", tr.eq(indx * 4)).attr("class"));
        $(this).toggleClass("check");
        var disabled = !cl.is(".check");
        $(sel).prop("disabled", disabled);
    })
$(sel).on("change", function() {
  !sel.value && cl.removeClass("check") && $(sel).prop("disabled", true);
})

});
</script>

Sav2907

18.03.2017 20:50

Нужно $('.abc').html();

рони	18.03.2017 20:53

Sav2907,
а голову включить?

alert($(".abc", tr.eq(indx * 4)).html());

Sav2907

18.03.2017 20:55

рони,
Спасибо вы лучший. Mission completed

Sav2907

23.03.2017 21:45

рони,
можете дополнить ваш код, если все числа в блоке имеют класс ".check" тогда alert('all_checked');

рони	23.03.2017 21:57

Sav2907,
в конец строки 67

if(cl.length == cl.filter(".check").length)      alert('all_checked');

Sav2907

23.03.2017 22:01

Цитата:

Сообщение от рони (Сообщение 448290)

Sav2907,
в конец строки 67

if(cl.length == cl.filter(".check").length)      alert('all_checked');

Спасибо большое!

Часовой пояс GMT +3, время: 08:02.