sof01

https://stackoverflow.com/questions/69142826/how-to-prevent-user-from-going-to-another-tab-page-before-checked-the-checkbox-i/69143112#69143112

by waxus

HTML

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
  <script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
</head>

<body>

  <div class="container">
    <h2>Dynamic Tabs</h2>
    <ul class="nav nav-tabs" id="tabs" title="Please checked the checkbox first before viewing this page. ">
      <li class="active"><a data-toggle="tab" href="#homepage">Terms & Condition</a></li>
      <li><a class="tabDisabled" data-toggle="tab" href="#home">Info</a></li>
      <li><a class="tabDisabled" data-toggle="tab" href="#info">Form</a></li>
      <li><a class="tabDisabled" data-toggle="tab" href="#form">Menu 3</a></li>
    </ul>

    <div class="tab-content">
      <div id="homepage" class="tab-pane fade in active">
        <h3>Terms and Conditions</h3>
        <span style="font-size: 80%;"><i>Please read the terms and condition first</i></span>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        <label class="checkbox"><input type="checkbox" id="reg"> Please tick this if u have read and understand everything </label>
      </div>
      <div id="home" class="tab-pane fade">
        <h3>Menu 1</h3>
        <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      </div>
      <div id="info" class="tab-pane fade">
        <h3>Menu 2</h3>
        <p>Sed ut perspiciatis unde omnis...

CSS

.tabDisabled{pointer-events: none;}

JavaScript

$(document).ready(function() {
let ch = $("#reg");
ch.change( ()=>{
	if (ch.is(":checked")){
    $(".tabDisabled").removeClass('tabDisabled');
  }else{
  	$("ul.nav li").not(".active").addClass('tabDisabled');  	   
  }
})

     


});