ブラウザ側で JavaScript が無効化されている場合、
サイトに JavaScript による制御を入れても当然動作しません。
意図せず無効になっている場合、正しくデータが登録されずに後続の処理に影響が出てくる可能性もあります。
今回、JavaScriptが無効状態の場合に、画面を操作させない強化ガジェットを作成いたしました。
CSS で操作を無効化しているため、完全に制御できるわけではございませんので、ご了承ください。

noscriptタグ

noscriptタグは、クライアント側で JavaScript が無効になっている場合に表示されるタグとなります。
HTML4.01では、noscriptタグを head にセットすることができませんでしたが、
HTML5では、head にセットが可能となっています。
また、noscript要素の中に link要素、style要素、meta要素を配置もできます。
こちらを使って作成いたします。

エラーメッセージ

今回は、エラーメッセージをフリーコンテンツ ブロックで作成しております。
サンプル作成しておりますが、自由にデザインは変更可能です。

<noscript>
    <!-- 以下は表示メッセージに応じて変更 -->
    <div class="noScriptArea">
        <h2>JavaScript を有効にしてください。</h2>
    </div>
</noscript>

/* エラーメッセージが重なるCSS */
div.noScriptArea {
    z-index: 1;
    position: absolute;
    width: 100%;
}
/* 表示枠のデザインに合わせて調整 */
div.noScriptArea h2{
    width: 50%;
    margin: auto;
    padding: 1rem 2rem;
    background: #f4f4f4;
    text-align: center;
}

ページ

JavaScript無効のメッセージを表示させるページは、
エラーメッセージ用のフリーコンテンツ と 通常表示させるブロックを追加します。
注意点として、エラーメッセージ用のフリーコンテンツを1番上に持って来てください。

ブロックの設定が完了しましたら、下記を head タグに設定します。

<noscript>
    <style>
        /* 操作無効化 */
        body{pointer-events:none;}
    </style>
</noscript>

全ページに反映したい場合、共通ソースの head に設定をお願いします。
共通ソースに設定した場合、すべてのページに反映することができます。
エラーメッセージ用のフリーコンテンツが追加せず、head に設定した場合、
操作ができない かつ、エラーメッセージも表示されない状態になってしまします。ご注意ください。

CSSで操作を制御しているため、完全に制御できるわけではございません。
不具合やほかのやり方が知りたい等あれば、下記の「コンテンツに関しての要望はこちら」からご連絡ください。