チェックボックスをオンにすると、次のページに移動します

Question

私はWeb開発が初めてで、このことを行う方法についてアドバイスが必要です。この種の機能には、どのような方法が最適ですか？

[送信]ボタンのすぐ上に3つのチェックボックスがあります。最初のページは、消費者が次のページに移動するためにチェックする必要があります。チェックされていない場合は、提出時に消費者に通知して、続行するためにチェックする必要がある必要があります。

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が "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">または有効/無効にできる他の種類のウィジェットでもかまいません）