Javascript.RU

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

Разблокировать кнопку при нажатии на любой 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>
Ответить с цитированием
  #2 (permalink)  
Старый 02.09.2020, 10:36
Аватар для voraa
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 2,692

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

Последний раз редактировалось voraa, 02.09.2020 в 10:53.
Ответить с цитированием
  #3 (permalink)  
Старый 02.09.2020, 19:21
Новичок на форуме
Отправить личное сообщение для Svety2020 Посмотреть профиль Найти все сообщения от Svety2020
 
Регистрация: 02.09.2020
Сообщений: 5

Разблокировать кнопку при нажатии на любой chekbox
Спасибо.
Код работает. Высший пилотаж.
Ответить с цитированием
  #4 (permalink)  
Старый 02.09.2020, 20:34
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

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>
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как сделать чтобы при втором нажатии на кнопку картинка закрывалась? KazZato Общие вопросы Javascript 1 10.05.2018 13:16
Смена цвета/картинки фона при нажатии на элемент Webtest Элементы интерфейса 16 20.04.2017 22:36
Удалить дубликат точки с запятой из поля при нажатии на кнопку espltd Элементы интерфейса 5 27.07.2015 08:20
Активация checkbox при нажатии на текст и изменение стиля у текста. ilyakor jQuery 2 10.06.2014 19:34
вывод нужного текста в текстовом поле при нажатии на кнопку! fifo4ka Общие вопросы Javascript 7 06.05.2008 13:36