Разблокировать кнопку при нажатии на любой chekbox
Здравствуйте!
Как разблокировать кнопку при нажатии на любой chekbox? Сейчас блокировка снимается только при нажатии на первый checkbox (Здание цеха). html <table class="table"> <tr> <td><label><input class="form-check-input" id="checkbox" type="checkbox" value="item1"><img src="i/01.gif" class="pic" />Здание цеха</lable></div></td> <td><label><input class="form-check-input" id="checkbox" type="checkbox" value="item3"><img src="i/03.gif" class="pic" />Станок</lable></div></td> <td><label><input class="form-check-input" id="checkbox" type="checkbox" value="item4"><img src="i/04.gif" class="pic" />Сляб</lable></div></td> <td><label><input class="form-check-input" id="checkbox" type="checkbox" value="item5"><img src="i/05.gif" class="pic" />Запчасти</lable></div></td> </tr> <tr> <td><label><input class="form-check-input" id="checkbox" type="checkbox" value="item6"><img src="i/37.gif" class="pic" />Вагон</lable></td> <td><label><input class="form-check-input" id="checkbox" type="checkbox" value="item7"><img src="i/07.gif" class="pic" />Паровой котел</lable></td> <td><label><input class="form-check-input" id="checkbox" type="checkbox" value="item8"><img src="i/08.gif" class="pic" />Трактор</lable></td> <td><label><input class="form-check-input" id="checkbox" type="checkbox" value="item9"><img src="i/09.gif" class="pic" />Автомобиль</lable></td> <td><label><input class="form-check-input" id="checkbox" type="checkbox" value="item10"><img src="i/10.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> <script> $('#checkbox').click(function(){ if ($(this).is(':checked')){ $('#btn').removeAttr('disabled'); } else { $('#btn').attr('disabled', 'disabled'); } }); </script> |
Нельзя устанавливать одинаковый id для разных элементов
Атрибут id должен быть уникальным.
<!DOCTYPE html>
<htmll lang="ru">
<head>
<meta charset="utf-8">
</head>
<body>
<table class="table">
<tr>
<td><label><input class="form-check-input" id="checkbox" type="checkbox" value="item1"><img src="i/01.gif" class="pic" />Здание цеха</lable></div></td>
<td><label><input class="form-check-input" id="checkbox" type="checkbox" value="item3"><img src="i/03.gif" class="pic" />Станок</lable></div></td>
<td><label><input class="form-check-input" id="checkbox" type="checkbox" value="item4"><img src="i/04.gif" class="pic" />Сляб</lable></div></td>
<td><label><input class="form-check-input" id="checkbox" type="checkbox" value="item5"><img src="i/05.gif" class="pic" />Запчасти</lable></div></td>
</tr>
<tr>
<td><label><input class="form-check-input" id="checkbox" type="checkbox" value="item6"><img src="i/37.gif" class="pic" />Вагон</lable></td>
<td><label><input class="form-check-input" id="checkbox" type="checkbox" value="item7"><img src="i/07.gif" class="pic" />Паровой котел</lable></td>
<td><label><input class="form-check-input" id="checkbox" type="checkbox" value="item8"><img src="i/08.gif" class="pic" />Трактор</lable></td>
<td><label><input class="form-check-input" id="checkbox" type="checkbox" value="item9"><img src="i/09.gif" class="pic" />Автомобиль</lable></td>
<td><label><input class="form-check-input" id="checkbox" type="checkbox" value="item10"><img src="i/10.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>
<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>
|
Разблокировать кнопку при нажатии на любой chekbox
Спасибо.
Код работает. Высший пилотаж. |
Svety2020,
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<table class="table">
<tr>
<td><label><input class="form-check-input" id="checkbox" type="checkbox" value=
"item1"><img src="i/01.gif" class="pic">Здание цеха</label></td>
<td><label><input class="form-check-input" id="checkbox" type="checkbox" value=
"item3"><img src="i/03.gif" class="pic">Станок</label></td>
<td><label><input class="form-check-input" id="checkbox" type="checkbox" value=
"item4"><img src="i/04.gif" class="pic">Сляб</label></td>
<td><label><input class="form-check-input" id="checkbox" type="checkbox" value=
"item5"><img src="i/05.gif" class="pic">Запчасти</label></td>
</tr>
<tr>
<td><label><input class="form-check-input" id="checkbox" type="checkbox" value=
"item6"><img src="i/37.gif" class="pic">Вагон</label></td>
<td><label><input class="form-check-input" id="checkbox" type="checkbox" value=
"item7"><img src="i/07.gif" class="pic">Паровой котел</label></td>
<td><label><input class="form-check-input" id="checkbox" type="checkbox" value=
"item8"><img src="i/08.gif" class="pic">Трактор</label></td>
<td><label><input class="form-check-input" id="checkbox" type="checkbox" value=
"item9"><img src="i/09.gif" class="pic">Автомобиль</label></td>
<td><label><input class="form-check-input" id="checkbox" type="checkbox" value=
"item10"><img src="i/10.gif" class="pic">Компьютер</label></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>
<script>
document.querySelector('.table').addEventListener('change', () => document.getElementById('btn').disabled = !document.querySelector('.form-check-input:checked'))
</script>
</body>
</html>
|
| Часовой пояс GMT +3, время: 04:47. |