Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Как разблокировать кнопку при нажатии на любой chekbox во второй закладке? (https://javascript.ru/forum/jquery/80977-kak-razblokirovat-knopku-pri-nazhatii-na-lyubojj-chekbox-vo-vtorojj-zakladke.html)

Svety2020 05.09.2020 16:02
Как разблокировать кнопку при нажатии на любой chekbox во второй закладке?
 
Здравствуйте!
На странице две закладки.
На первой закладке все работает.
Как разблокировать кнопку при нажатии на любой chekbox на второй закладке?
CSS для закладок
#tabs {
margin: 10px 0;
}
.tabs-nav {
overflow: hidden;
margin: 0;
padding: 0;
}
.tabs-nav li {
display: block;
float: left;
padding: 0;
list-style: none;
}
.tabs-nav a {
display: block;
padding: 10px 20px;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
border-left: 1px solid #ccc;
background: #fbfbfb;
font-size: 16px;
text-decoration: none;
text-align: center;
color: #999;
}
.tabs-nav li:first-child a {
border-radius: 5px 0 0 0;
}
.tabs-nav li:last-child a {
display: block;
border-right: 1px solid #ccc;
border-radius: 0 5px 0 0;
}
.tabs-nav a.active {
border-bottom: 1px solid #fff;
background: #fff;
color: #000;
}
.tabs-items {
border: 1px solid #ccc;
border-radius: 0 5px 5px 5px;
background: #fff;
margin: -1px 0 0 0;
}
.tabs-item {
padding: 15px;
}

Html
<!DOCTYPE html>
<html lang="ru">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(function() {
var tab = $('#tabs .tabs-items > div');
tab.hide().filter(':first').show();

// Клики по вкладкам.
$('#tabs .tabs-nav a').click(function(){
tab.hide();
tab.filter(this.hash).show();
$('#tabs .tabs-nav a').removeClass('active');
$(this).addClass('active');
return false;
}).filter(':first').click();

// Клики по якорным ссылкам.
$('.tabs-target').click(function(){
$('#tabs .tabs-nav a[href=' + $(this).data('id')+ ']').click();
});
});
</script>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="tabs">
<!-- Кнопки -->
<ul class="tabs-nav">
<li><a href="#tab-1">Вкладка №1</a></li>
<li><a href="#tab-2">Вкладка №2</a></li>
</ul>
<!-- Контент -->
<div class="tabs-items">
<div class="tabs-item" id="tab-1">
<strong>Текст вкладки №1</strong>
<table class="table">
<tr>
<td><label><input class="form-check-input"" type="checkbox" value="item1"><img src="i/01.gif" class="pic" />Здание цеха</lable></div></td>
<td><label><input class="form-check-input" type="checkbox" value="item3"><img src="i/03.gif" class="pic" />Станок</lable></div></td>
</tr>
<tr>
<td><label><input class="form-check-input" type="checkbox" value="item6"><img src="i/37.gif" class="pic" />Вагон</lable></td>
<td><label><input class="form-check-input" type="checkbox" value="item7"><img src="i/07.gif" class="pic" />Паровой котел</lable></td>
</tr>
<tr><td><div id="ok"><button id="btn" class="btn btn-sm btn-outline-primary" disabled="disabled" ONCLICK="ok1();">Готово</button></div></td></tr>
</table>
</div>
<div class="tabs-item" id="tab-2">
<strong>Текст вкладки №2</strong>
<table class="table">
<tr>
<td><label><input class="form-check-input"" type="checkbox" value="item1"><img src="i/01.gif" class="pic" />Здание цеха</lable></div></td>
<td><label><input class="form-check-input" type="checkbox" value="item3"><img src="i/03.gif" class="pic" />Станок</lable></div></td>
</tr>
<tr>
<td><label><input class="form-check-input" type="checkbox" value="item6"><img src="i/37.gif" class="pic" />Вагон</lable></td>
<td><label><input class="form-check-input" type="checkbox" value="item7"><img src="i/07.gif" class="pic" />Паровой котел</lable></td>
</tr>
<tr><td><div id="ok"><button id="btn" class="btn btn-sm btn-outline-primary" disabled="disabled" ONCLICK="ok2();">Готово</button></div></td></tr>
</table>

</div>

</div>
<script>
let chbs = [...document.querySelectorAll('.form-check-input')]
chbs.forEach (el => el.addEventListener('change', () => document.getElementById('btn').disabled = chbs.every( x => ! x.checked) ) )
</script>
</body>
</html>

рони 05.09.2020 16:12
Svety2020,
Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:
[html run]
... минимальный код страницы с вашей проблемой
[/html]

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.

Svety2020 05.09.2020 18:50
Разблокировать кнопку при нажатии на любой chekbox на второй закладке
 
Код отфоматировала.
<!DOCTYPE html>
<html lang="ru">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="https://snipp.ru/cdn/bootstrap/4.3/bootstrap.min.css">
<script src="https://snipp.ru/cdn/jquery/2.1.1/jquery.min.js"></script>

<style type="text/css">
#tabs {
margin: 10px 0;
}
.tabs-nav {
overflow: hidden;
margin: 0;
padding: 0;
}
.tabs-nav li {
display: block;
float: left;
padding: 0;
list-style: none;
}
.tabs-nav a {
display: block;
padding: 10px 20px;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
border-left: 1px solid #ccc;
background: #fbfbfb;
font-size: 16px;
text-decoration: none;
text-align: center;
color: #999;
}
.tabs-nav li:first-child a {
border-radius: 5px 0 0 0;
}
.tabs-nav li:last-child a {
display: block;
border-right: 1px solid #ccc;
border-radius: 0 5px 0 0;
}
.tabs-nav a.active {
border-bottom: 1px solid #fff;
background: #fff;
color: #000;
}
.tabs-items {
border: 1px solid #ccc;
border-radius: 0 5px 5px 5px;
background: #fff;
margin: -1px 0 0 0;
}
.tabs-item {
padding: 15px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(function() {
var tab = $('#tabs .tabs-items > div');
tab.hide().filter(':first').show();

// Клики по вкладкам.
$('#tabs .tabs-nav a').click(function(){
tab.hide();
tab.filter(this.hash).show();
$('#tabs .tabs-nav a').removeClass('active');
$(this).addClass('active');
return false;
}).filter(':first').click();

// Клики по якорным ссылкам.
$('.tabs-target').click(function(){
$('#tabs .tabs-nav a[href=' + $(this).data('id')+ ']').click();
});
});
</script>

</head>
<body style="font-size: 14px; position: relative; padding: 15px 20px;">
<div id="tabs">
<!-- Кнопки -->
<ul class="tabs-nav">
<li><a href="#tab-1">Вкладка №1</a></li>
<li><a href="#tab-2">Вкладка №2</a></li>
</ul>
<!-- Контент -->
<div class="tabs-items">
<div class="tabs-item" id="tab-1">
<strong>Текст вкладки №1</strong>
<table class="table">
<tr>
<td><label><input class="form-check-input"" type="checkbox" value="item1">1</lable></div></td>
<td><label><input class="form-check-input" type="checkbox" value="item3">2</lable></div></td>
</tr>
<tr>
<td><label><input class="form-check-input" type="checkbox" value="item6">3</lable></td>
<td><label><input class="form-check-input" type="checkbox" value="item7">4</lable></td>
</tr>
<tr><td><div id="ok"><button id="btn" class="btn btn-sm btn-outline-primary" disabled="disabled" ONCLICK="ok1();">Готово</button></div></td></tr>
</table>
</div>
<div class="tabs-item" id="tab-2">
<strong>Текст вкладки №2</strong>
<table class="table">
<tr>
<td><label><input class="form-check-input"" type="checkbox" value="item1">1</lable></div></td>
<td><label><input class="form-check-input" type="checkbox" value="item3">2</lable></div></td>
</tr>
<tr>
<td><label><input class="form-check-input" type="checkbox" value="item6">3</lable></td>
<td><label><input class="form-check-input" type="checkbox" value="item7">4</lable></td>
</tr>
<tr><td><div id="ok"><button id="btn" class="btn btn-sm btn-outline-primary" disabled="disabled" ONCLICK="ok2();">Готово</button></div></td></tr>
</table>

</div>

</div>
<script>
let chbs = [...document.querySelectorAll('.form-check-input')]
chbs.forEach (el => el.addEventListener('change', () => document.getElementById('btn').disabled = chbs.every( x => ! x.checked) ) )
</script>
</body>
</html>

laimas 05.09.2020 18:54
Цитата:
Сообщение от Svety2020
Код отфоматировала
:no: Форматирование, это по указанной ссылке, рассказывается, в какие ВВ теги помещать код, чтобы он подсвечивался на странице. Ваш код надо поместить в теги HTML. А форматирование в самом коде, это отступы соблюсти, дабы в подсвеченном они были.

voraa 06.09.2020 12:56
Цитата:
Сообщение от Svety2020
<div id="ok"><button id="btn"
Еще раз! Нельзя назначать одинаковые id нескольким элементам!

Разблокирует на скольких угодно вкладках

<!DOCTYPE html>
<html lang="ru">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="https://snipp.ru/cdn/bootstrap/4.3/bootstrap.min.css">
<script src="https://snipp.ru/cdn/jquery/2.1.1/jquery.min.js"></script>

<style type="text/css">
#tabs {
margin: 10px 0;
}
.tabs-nav {
overflow: hidden;
margin: 0;
padding: 0;
}
.tabs-nav li {
display: block;
float: left;
padding: 0;
list-style: none;
}
.tabs-nav a {
display: block;
padding: 10px 20px;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
border-left: 1px solid #ccc;
background: #fbfbfb;
font-size: 16px;
text-decoration: none;
text-align: center;
color: #999;
}
.tabs-nav li:first-child a {
border-radius: 5px 0 0 0;
}
.tabs-nav li:last-child a {
display: block;
border-right: 1px solid #ccc;
border-radius: 0 5px 0 0;
}
.tabs-nav a.active {
border-bottom: 1px solid #fff;
background: #fff;
color: #000;
}
.tabs-items {
border: 1px solid #ccc;
border-radius: 0 5px 5px 5px;
background: #fff;
margin: -1px 0 0 0;
}
.tabs-item {
padding: 15px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(function() {
var tab = $('#tabs .tabs-items > div');
tab.hide().filter(':first').show();

// Клики по вкладкам.
$('#tabs .tabs-nav a').click(function(){
tab.hide();
tab.filter(this.hash).show();
$('#tabs .tabs-nav a').removeClass('active');
$(this).addClass('active');
return false;
}).filter(':first').click();

// Клики по якорным ссылкам.
$('.tabs-target').click(function(){
$('#tabs .tabs-nav a[href=' + $(this).data('id')+ ']').click();
});
});
</script>

</head>
<body style="font-size: 14px; position: relative; padding: 15px 20px;">
<div id="tabs">
<!-- Кнопки -->
<ul class="tabs-nav">
<li><a href="#tab-1">Вкладка №1</a></li>
<li><a href="#tab-2">Вкладка №2</a></li>
</ul>
<!-- Контент -->
<div class="tabs-items">
<div class="tabs-item" id="tab-1">
<strong>Текст вкладки №1</strong>
<table class="table">
<tr>
<td><label><input class="form-check-input"" type="checkbox" value="item1">1</lable></div></td>
<td><label><input class="form-check-input" type="checkbox" value="item3">2</lable></div></td>
</tr>
<tr>
<td><label><input class="form-check-input" type="checkbox" value="item6">3</lable></td>
<td><label><input class="form-check-input" type="checkbox" value="item7">4</lable></td>
</tr>
<tr><td><div id="ok1"><button id="btn1" class="btn btn-sm btn-outline-primary" disabled="disabled" ONCLICK="ok1();">Готово</button></div></td></tr>
</table>
</div>
<div class="tabs-item" id="tab-2">
<strong>Текст вкладки №2</strong>
<table class="table">
<tr>
<td><label><input class="form-check-input"" type="checkbox" value="item1">1</lable></div></td>
<td><label><input class="form-check-input" type="checkbox" value="item3">2</lable></div></td>
</tr>
<tr>
<td><label><input class="form-check-input" type="checkbox" value="item6">3</lable></td>
<td><label><input class="form-check-input" type="checkbox" value="item7">4</lable></td>
</tr>
<tr><td><div id="ok2"><button id="btn2" class="btn btn-sm btn-outline-primary" disabled="disabled" ONCLICK="ok2();">Готово</button></div></td></tr>
</table>

</div>

</div>
<script>
document.getElementById('tabs').addEventListener('change', (ev) => {
	const etg = ev.target
	if (etg.matches('.form-check-input') ) {
		const etab = etg.closest('.tabs-item')
		const chbs = [...etab.querySelectorAll('.form-check-input')]
		etab.querySelector('button.btn.btn-sm.btn-outline-primary').disabled = chbs.every( x => ! x.checked)
	}
})
</script>
</body>
</html>

Svety2020 06.09.2020 16:03
Спасибо. Замечания учту по форматированию.
Все понятно.


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