Как сделать вывод текста при нажатии на неактивную кнопку?

Question

[unsweet]

Есть форма, в конце которой стоит чекбокс(отправка данных на обработку) и кнопка отправки.
Скрипт делает кнопку активной только после нажатия на чекбокс.
Вопрос: как вывести сообщение(но не alert), желательно в виде строки под кнопкой, при нажатии на неактивную кнопку отправки(с ненажатым чекбоксом), чтобы было понятно, почему submit не нажимается(неактивен)

<input type="checkbox" id="check" onchange="changeButtonState(this)" />&nbsp;&nbsp; <a href="/Пользовательское-соглашение.pdf" target="_blank" >Да, я согласен на обработку своих персональных данных</a> 
  <br />
 <input type="submit" id="btn" disabled="disabled" name="web_form_submit" value="отправить" class="zvonok_form" /> 
<script> 
function changeButtonState(checkbox) { 
    var btn = document.getElementById('btn'); 
    if (checkbox.checked) { 
        btn.disabled = false; 
		
    } else { 
        btn.disabled = true; 
		
    } 
} 
</script>

Answer 1

[Stalker_RED]

UPD: Элементы с атрибутом disabled=true не генерируют события. Не только click, а даже mousedown или mouseover. Похоже, что используется тот-же механизм что и при pointer-events: none

Можно сделать костыль: поместить над кнопкой прозрачный элемент и отслеживать клики по нему.
https://jsfiddle.net/8x4c9s31/

Comments

[unsweet]

а какие стили должны быть у span.withMyMessage ?я имею в виду, что если сделать style="display:none", то span не выводится.

Answer 2

[DaniilNazarov]

1. Повесь обработчик события клика на форму
2. В обработчике проверь, находится ли в event.target твоя кнопка
3. Если target - кнопка, выполни необходимые действия
4. Profit