Установите флажок, чтобы перейти к следующей странице

Question

Я новичок в веб-разработке, и мне нужен совет о том, как это сделать. Каков наилучший и обычный способ для такого рода функций?

Непосредственно над кнопкой «Отправить» есть три флажка. Первый должен быть проверен, чтобы потребитель мог перейти на следующую страницу. Если он не проверен, мне нужно уведомить потребителя о том, что ему нужно проверить его, чтобы продолжить.

Answer 1

JS:

function validate() 
{ 
    if(!document.getElementById('id-of-checkbox-1').checked) 
    { 
    alert('Check the box!'); 
    return false; 
    } 

    return true; 
} 

HTML:

<form onsubmit="return validate();"> 
    <!-- form content --> 
</form> 

При нажатии кнопки «Отправить» выполняется проверка функции JS. Если флажок с идентификатором «id-of-checkbox-1» равен , а не, пользователь получает предупреждение, а функция возвращает false, в противном случае возвращает true. В атрибуте onsubmit формы он указывает return validate();, так как результат функции также должен быть возвращен браузеру. Если это возвращает false, форма не отправляется; иначе это так.

Answer 2

Простой. Провод вверх обработчик onsubmit событие в форму, как это:

<script> 
document.getElementById("theForm").onsubmit = function() { 

    // false is returned when the checkbox is not checked 
    // thereby preventing form submission 
    return document.getElementById("myCheckbox").checked; 
} 
</script> 

Пример разметки:

<form id="theForm"> 
    <input type="checkbox" id="myCheckbox"/> 
    <input type="submit"/> 
</form> 

Demo here.

Answer 3

Кто-то на работе попросил меня сделать что-то похожее на то, что в этом вопросе. Вот my solution:

HTML:

<p>Mark the following checkbox:</p> 
<form> 
<p><label><input type="checkbox" id="chk" />Checkbox</label></p> 
<p><button id="continue" disabled="disabled">Continue</button></p> 
</form> 

JavaScript (предполагается, что библиотека JQuery присутствует):

$(function() { 
    $('#chk').click(function() { 
     $('#continue').prop(
      'disabled', 
      (!$(this).prop('checked')) 
     ); 
    }); 
}); 

Кнопка continue отключается до тех пор, пока пользователь не маркирует флажок. (Это может быть <input type="submit"> или любой другой вид виджетов, которые могут быть включены/отключены.)