Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 05.09.2020, 16:02
Новичок на форуме
Отправить личное сообщение для Svety2020 Посмотреть профиль Найти все сообщения от Svety2020
 
Регистрация: 02.09.2020
Сообщений: 5

Как разблокировать кнопку при нажатии на любой 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>
Ответить с цитированием
  #2 (permalink)  
Старый 05.09.2020, 16:12
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,126

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

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

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.
Ответить с цитированием
  #3 (permalink)  
Старый 05.09.2020, 18:50
Новичок на форуме
Отправить личное сообщение для Svety2020 Посмотреть профиль Найти все сообщения от Svety2020
 
Регистрация: 02.09.2020
Сообщений: 5

Разблокировать кнопку при нажатии на любой 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>
Ответить с цитированием
  #4 (permalink)  
Старый 05.09.2020, 18:54
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,989

Сообщение от Svety2020
Код отфоматировала
Форматирование, это по указанной ссылке, рассказывается, в какие ВВ теги помещать код, чтобы он подсвечивался на странице. Ваш код надо поместить в теги HTML. А форматирование в самом коде, это отступы соблюсти, дабы в подсвеченном они были.
Ответить с цитированием
  #5 (permalink)  
Старый 06.09.2020, 12:56
Аватар для voraa
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 2,750

Сообщение от 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>
Ответить с цитированием
  #6 (permalink)  
Старый 06.09.2020, 16:03
Новичок на форуме
Отправить личное сообщение для Svety2020 Посмотреть профиль Найти все сообщения от Svety2020
 
Регистрация: 02.09.2020
Сообщений: 5

Спасибо. Замечания учту по форматированию.
Все понятно.
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Выбор из option select при нажатии на кнопку на др. странице Artemyi Элементы интерфейса 9 29.09.2019 17:39
Как при нажатии на лайк прибавить еденицу, при нажатии на диз отнять? ekad Элементы интерфейса 1 16.08.2019 12:46
Как убрать скролл при клике на кнопку? marki1404 Элементы интерфейса 1 03.01.2019 19:42
Удалить дубликат точки с запятой из поля при нажатии на кнопку espltd Элементы интерфейса 5 27.07.2015 08:20
Как добавить и удалить класс при нажатии на div? Jeick9 Events/DOM/Window 23 10.03.2015 16:05