Форум

Svety2020 · #1 (**permalink**) 02.09.2020, 08:57

Здравствуйте!
Как разблокировать кнопку при нажатии на любой 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>

voraa · #2 (**permalink**) 02.09.2020, 10:36

Нельзя устанавливать одинаковый 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>

Svety2020 · #3 (**permalink**) 02.09.2020, 19:21

Спасибо.
Код работает. Высший пилотаж.

рони · #4 (**permalink**) 02.09.2020, 20:34

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>

Форум

Справочник

Discord чат

Курсы javascript