|
Сообщение от 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>